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、

これを成し遂げるのを手伝ってください

score 2 · Accepted Answer

モデルを適切に使用していません。モデルはサーバー上のデータモデルを表すため、パペットを作成するためのモデルはなく、単一のPuppetモデルのみを使用する必要があります。Backbone は、作成に使用する URL を独自に決定します。

さらに、モデルには問題urlがあります。作成用の URL しかないようです。

デフォルトでは、Backbone は RESTful API を想定しています。新しいモデルを保存すると、POST リクエストがサーバーに送信されます。モデルを取得する場合、適切な URL を生成しようとします。

上記のコードではurl、任意のモデルに対して返されるのは「api/create」ですが、おそらく「puppets/3」のようなものにしたいでしょう (3 はモデルのid属性になります)。

モデルインスタンスを適切に取得できるようにするには、urlRootプロパティを含む (およびを含まないurl) Puppet モデル (所有しているモデルを置き換える) が必要です。urlRootたとえば「パペット」です。次に、モデルインスタンスをフェッチすると、Backbone は自動的に GET リクエストを「puppets/3」に送信して、適切なモデルインスタンスを取得します。

上記のコードのもう 1 つの問題は、モデルインスタンスでビューをインスタンス化していないことです。パペットを作成し、情報を表示するためのテンプレートがあるからといって、それが魔法のように表示されるわけではありません。

ビューを定義し、インスタンス化するときにパペットモデルインスタンスを提供する必要があります。Curretnyl さん、リージョン (ビューなし) を含む空のレイアウトを表示しているだけです。

こちらの無料の PDF をご覧ください: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

これは Marionette に関する私の本のサンプルであり、モデル、コレクション、およびビューがどのように機能するかの基本をより詳細に説明しています。マリオネットを始めるきっかけになります。

java - バックボーン マリオネット サーバーから値を一覧表示する

1 に答える 1

Related

Reference

java - バックボーンマリオネットサーバーから値を一覧表示する