java - Backbone marionette 列出来自服务器的值

Question

我是 Backbone.marionette.js 的新手，正在使用 Spring MVC 开发示例应用程序。我能够调用服务器来添加新数据，但我无法使用backbone.marionette.js 显示 Controller 中可用的示例数据。

以下是详细文件: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>

Spring 服务类:

  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;
        }
    }

我没有添加用于显示服务器文件中可用详细信息的代码，老实说我不知道​​如何，

请帮我完成这件事

Answer 1

您没有正确使用模型。模型代表服务器上的数据模型，因此您不应该使用模型来创建 Marionette ，而只能使用单个Puppet模型。 Backbone 将自行确定用于创建的 url。

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

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

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

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

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

您需要定义一个 View ，并在实例化它时为其提供一个 Marionette 模型实例。 Curretnyl，您只是显示一个带有区域的空布局(没有 View )。

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

这是my book on Marionette的样本，并更详细地解释了模型、集合和 View 如何工作的基础知识。它将帮助您开始使用 Marionette。