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存在问题：您似乎只有一个用于创建的网址。

默认情况下，Backbone需要一个安静的API：当您保存新模型时，它会向服务器发送POST请求。如果要检索模型，它将尝试生成相应的URL。

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

为了能够正确检索模型实例，您需要具有urlRoot属性（而不是url）的Puppet模型（重新使用您拥有的模型）。例如，urlRoot将是“木偶”。然后，当您获取模型实例时，Backbone将自动向“puppets / 3”发送GET请求以获取正确的模型实例。

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

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

您可以在此处查看免费的pdf：http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

这是my book on Marionette的示例，更详细地解释了模型，集合和视图如何工作的基础知识。它将让你开始使用Marionette。

Backbone marionette列出服务器的值

1 个答案: