java - 骨干木偶 列出来自服务器的值

Question

我是 Backbone.marionette.js 的新手，并使用 spring MVC 开发示例应用程序。我可以调用服务器来添加新数据，但是i am not able to display the sample data available in controller using backbone.marionette.js。

以下是详细文件：main.js

$(function() {
    Puppet.start();
});

puppet.controller.js

PuppetController = {

    PUPPET_STARTED_EVENT : "puppet:started",
    ROUTER_STARTED_EVENT : "Router:started",
    MAIN_LAYOUT_RENDERED_EVENT : "Layout:Main:rendered",
    TEMPLATE_PRELOADING_COMPLETED_EVENT : "Template:preloaded",

    fireRouterStartedEvent : function() {
        Puppet.vent.trigger(this.ROUTER_STARTED_EVENT);
    },

    onRouterStartedEvent : function(listener) {
        Puppet.vent.on(this.ROUTER_STARTED_EVENT, listener);
    },

    firePuppetAppStartedEvent : function() {
        Puppet.vent.trigger(this.PUPPET_STARTED_EVENT);
    },

    fireTemplatePreloadingCompletedEvent : function() {
        Puppet.vent.trigger(this.TEMPLATE_PRELOADING_COMPLETED_EVENT);
    },

    onTemplatePreloadingCompletedEvent : function(listener) {
        Puppet.vent.on(this.TEMPLATE_PRELOADING_COMPLETED_EVENT, listener);
    },

    fireMainLayoutRenderedEvent : function() {
        Puppet.vent.trigger(this.MAIN_LAYOUT_RENDERED_EVENT);
    },

    onMainLayoutRenderedEvent : function(listener) {
        Puppet.vent.on(this.MAIN_LAYOUT_RENDERED_EVENT, listener);
    }
};

puppet.create.js

Puppet.module("CreatePuppet", function(CreatePuppet, Puppet, Backbone, Marionette, $, _) {

    var CreatePuppetModel = Backbone.Model.extend({
        url : 'api/create'
    });

    var CreatePuppetView = Marionette.ItemView.extend({
        template : "#create-puppet",
        events :{
            "click #create-puppet-button" : "creatPuppet",
            "click #list-puppet-button" : "listPuppet"
        },

        creatPuppet : function(){
            var puppetModel = new CreatePuppetModel();
            puppetModel.set("firstName",$("#first-name").val());
            puppetModel.set("lastName",$("#last-name").val());
            puppetModel.save();

        },

        listPuppet : function(){
            alert("Table button is clicked");
        },

    });

    Puppet.addInitializer(function() {
        Puppet.preloadTemplate("#create-puppet");
        CreatePuppet.view = new CreatePuppetView();
        PuppetController.onMainLayoutRenderedEvent(function() {
            Puppet.MainLayout.layout.puppetForm.show(CreatePuppet.view);
        });
    });
});

puppet.js

Puppet = new Backbone.Marionette.Application();

Puppet.templateIdsToLoad = [];
Puppet.preloadTemplate = function(templateId) {
    Puppet.templateIdsToLoad.push(templateId);
};

Puppet.getContextPath = function(contextPathSuffix) {
    return '/api' + contextPathSuffix;
};

Puppet.addRegions({
    mainContainer : '#main-container'
});

Puppet.on("initialize:after", function() {
    var loadAllTemplates = Backbone.Marionette.TemplateCache.preloadTemplates(Puppet.templateIdsToLoad, null);
    $.when(loadAllTemplates).done(function() {
        PuppetController.fireTemplatePreloadingCompletedEvent();
    });
});

PuppetController.onRouterStartedEvent(function() {
    Backbone.history.start();
    PuppetController.firePuppetAppStartedEvent();
});

puppet.layout.js

Puppet.module("MainLayout", function(MainLayout, Puppet, Backbone,
        Marionette, $, _) {

    var Layout = Backbone.Marionette.Layout.extend({
        template : "#main-container-layout",
        regions:{
            puppetForm : "#puppet-form"
        }
    });

    Puppet.addInitializer(function() {
        Puppet.preloadTemplate("#main-container-layout"); 
        // why to load twice, why not to give the reference like template
        PuppetController.onTemplatePreloadingCompletedEvent(function() {
            MainLayout.layout = new Layout();
            Puppet.mainContainer.show(MainLayout.layout);
            /* what is this mainContainer -> 1. is predefined
                                             2. user defined if so where is it defined */
            PuppetController.fireMainLayoutRenderedEvent();
        });
    });
});

puppet.router.js

Puppet.module("PuppetRouter", function (PuppetRouter, Puppet, Backbone, Marionette, $, _) {

    var Router = Backbone.Marionette.AppRouter.extend({
    });

    Puppet.addInitializer(function () {

        PuppetController.onMainLayoutRenderedEvent(function () {
            PuppetRouter.router = new Router({
                controller: PuppetController
            });
            PuppetController.fireRouterStartedEvent();
        });
    });
});

在模板文件夹下

main-container-layout.htm

<div id="puppet-form"></div>

create-puppet.htm

<label>First Name : </label>
<input type="text" id="first-name"/>
<label>Last Name : </label>
<input type="text" id="last-name"/>
<input type="button" id="create-puppet-button" value="Save"/>
<input type="button" id="list-puppet-button" value="Table"/>
<div id="puppet-preview"></div>

puppet-preview.htm

<div class="hex-row">
    <div id="firstNameID"><%= firstName %></div>
    <div id="lastNameID"><%= lastName %></div>
</div>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Puppet Show</title>

    <link href="assets/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/puppet/css/puppet.css" rel="stylesheet">
</head>
<body>

<div id="main-container"></div>

<!-- Backbone Marionette -->
<script type="text/javascript" src="assets/lib/backbone.marionette/json2.js"></script>
<script type="text/javascript" src="assets/lib/backbone.marionette/jquery.js"></script>
<script type="text/javascript" src="assets/lib/backbone.marionette/underscore.js"></script>
<script type="text/javascript" src="assets/lib/backbone.marionette/backbone.js"></script>
<script type="text/javascript" src="assets/lib/backbone.marionette/backbone.marionette.js"></script>
<script type="text/javascript" src="assets/lib/backbone.marionette/backbone.marionette.templates.js"></script>

<!-- backgrid Framework -->
<script type="text/javascript" src="assets/lib/backgrid/js/backgrid.js"></script>

<!-- Bootstrap -->
<script type="text/javascript" src="assets/lib/bootstrap/js/bootstrap.js"></script>

<!-- Puppet Framework -->
<script type="text/javascript" src="assets/puppet/js/puppet.controller.js"></script>
<script type="text/javascript" src="assets/puppet/js/puppet.js"></script>
<script type="text/javascript" src="assets/puppet/js/puppet.layout.js"></script>
<script type="text/javascript" src="assets/puppet/js/puppet.create.js"></script>


<!--Routing has to be the last module-->
<script type="text/javascript" src="assets/puppet/js/puppet.router.js"></script>
<script type="text/javascript" src="assets/puppet/js/main.js"></script>

</body>
</html>

春季服务类：

  package com.hexgen.puppet;

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.hexgen.puppet.CreatePuppet;

    import java.util.ArrayList;
    import java.util.List;

    @Controller
    public class PuppetService {

        @RequestMapping(method = RequestMethod.POST, value = "/create")
        public
        @ResponseBody
        void createOrder(@RequestBody CreatePuppet request) {
            System.out.println(request);
        }

        @RequestMapping(method = RequestMethod.GET, value = "/list")
        public
        @ResponseBody
        List<Puppet> getGroups() {
            List<Puppet> puppets = new ArrayList<Puppet>();
            Puppet puppet = new Puppet();
            puppet.setFirstName("Mayank");
            puppet.setLastName("Kumar");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Shylendra");
            puppet.setLastName("Bhat");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Akash");
            puppet.setLastName("Waran");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Shreyas");
            puppet.setLastName("Lokkur");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Anthony");
            puppet.setLastName("Raj");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Dheemanth");
            puppet.setLastName("Bharadwaj");
            puppets.add(puppet);

            puppet = new Puppet();
            puppet.setFirstName("Prasanna");
            puppet.setLastName("Adiga");
            puppets.add(puppet);

            return puppets;
        }
    }

我有not added code for displaying the details available in server file, to be hones i don't know how to，

请帮我完成这件事

Answer 1

您没有正确使用模型。模型代表服务器上的数据模型，所以你不应该有一个模型来创建木偶，只有一个Puppet模型。Backbone 将自行确定用于创建的 url。

此外，您的模型存在问题url：您似乎只有一个用于创建的 URL。

默认情况下，Backbone 需要一个 RESTful API：当你保存一个新模型时，它会向服务器发送一个 POST 请求。当您要检索模型时，它会尝试生成适当的 url。

在上面的代码中，url任何模型的返回值都是“api/create”，但您可能希望它类似于“puppets/3”（其中 3 是模型的id属性）。

为了能够正确检索模型实例，您需要有一个具有urlRoot属性（并且没有）的 Puppet 模型（替换您拥有的模型url）。例如，urlRoot将是“木偶”。然后，当您获取模型实例时，Backbone 会自动向“puppets/3”发送 GET 请求以获取正确的模型实例。

上面代码的另一个问题是您没有使用模型实例实例化任何视图。仅仅因为您创建了一个人偶并拥有一个显示信息的模板并不意味着它会神奇地显示出来。

您需要定义一个视图，并在实例化它时为其提供一个人偶模型实例。Curretnyl，您只是显示一个带有区域的空布局（无视图）。

您可能想在这里查看免费的 pdf：http: //samples.leanpub.com/marionette-gentle-introduction-sample.pdf

这是我关于 Marionette 的书的示例，并更详细地解释了模型、集合和视图如何工作的基础知识。它会让你开始使用 Marionette。