backbone.js - メインレイアウトが読み込まれる前に読み込みを表示する

Question

これは、Backbone ボイラープレートからのフォローアップの質問です: "this.model is undefined" . 構造の一部を解決することができましたが、新たな問題に遭遇しました。ビューの設定にlayoutManagerアダプターを使用するバックボーンボイラープレートを使用しています。メインビューと後続の最初のビューは、すべてのアセットを正しくロードしているように見えますが、メインビューがロードされる前に後続のビューが起動しているようです。私のルーターファイルは次のとおりです。

define([
    // Application.
    "app",

    //Modules
    "modules/homepage"
],
    function (app, Homepage) {
        "use strict";

        // Defining the application router, you can attach sub routers here.
        var Router = Backbone.Router.extend({
            initialize: function(){
                var collections = {
                    homepage: new Homepage.Collection()
                };

                _.extend(this, collections);

                app.useLayout("main-frame").setViews({
                    ".homepage": new Homepage.Views.Index(collections)
                }).render();
            },

            routes:{
                "":"index"
            },

            index: function () {
                this.reset();
            },

            // Shortcut for building a url.
            go: function() {
                return this.navigate(_.toArray(arguments).join("/"), true);
            },

            reset: function() {
                // Reset collections to initial state.
                if (this.homepage) {
                    this.homepage.reset();
                }

                // Reset active model.
                app.active = false;
            }

        });

        return Router;
    }
);

そして、ここに私のモジュールがあります:

define([
    "app",
    ["localStorage"]
],
function(app){
    "use strict";

    var Homepage = app.module();

    Homepage.Model = Backbone.Model.extend({

        defaults: function(){
            return {
                homepage: {}
            };
        }
    });

    Homepage.Collection = Backbone.Collection.extend({
        //localStorage: new Backbone.LocalStorage("Homepage.Collection"),

        refreshFromServer: function() {
            return Backbone.ajaxSync('read', this).done( function(data){
                console.log(data);
                //save the data somehow?
            });
        },

        /*model: Homepage.Model,*/

        cache: true,

        url: '/app/json/test.json',

        initialize: function(options){
            if (options) {
                this.homepage = options.homepage;
            }else{
                //this.refreshFromServer();
            }
        }
    });

    Homepage.Views.Index = Backbone.View.extend({
        template: "homepage",
        el: '#mainContent',

        serialize: function() {
            return {
                collection: this.options.homepage
            };
        },

        initialize: function(){
            this.listenTo(this.options.homepage,{
                "reset": this.render,
                "fetch": function(){
                    $(this.el).html("Loading...");
                }
            });

        }
    });

    return Homepage;
});

ご覧のとおり、「メインフレーム」テンプレートは、ページに読み込まれるメインテンプレートです。後でホームページテンプレートをロードして、ID「#mainContent」に入力します。ただし、この場合、「#mainContent」はまだ存在しないため、ホームページテンプレートはどこにも読み込まれません。

score 0 · Accepted Answer

多大な努力の末、backbone-boilerplate から離れることを決定し、Backbone/RequireJS/localStorage アダプターを使用して次のようにセットアップしました。

app.js:

define([
    'jquery',
    'underscore',
    'backbone',
    'router' // Request router.js
], function($, _, Backbone, Router){
    var initialize = function(){
        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

main.js :

require.config({
    paths: {
        jquery: 'libs/jquery',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone',
        'backbone.localStorage': 'libs/backbone.localStorage',
        templates: 'templates'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore','jquery'],
            exports: 'Backbone'
        },
        'backbone.localStorage': {
            deps: ['backbone'],
            exports: 'Backbone'
        }
    }
});

require([
    'app'

], function(App){
    App.initialize();
});

ルーター.js :

define([
    'jquery',
    'underscore',
    'backbone',

    //Modules
    "modules/homepage"
],
    function ($, _, Backbone, Homepage) {
        "use strict";

        // Defining the application router, you can attach sub routers here.
        var Router = Backbone.Router.extend({
            routes:{
                "":"index"
            }
        });

        var initialize = function(){

            var app_router = new Router;

            app_router.on('route:index', function(){
                // Call render on the module we loaded in via the dependency array
                var collection = new Homepage.Collection();
                var homepage;
                collection.fetch({
                    success: function(){
                        if(collection.length === 0){
                            console.log('refreshing from server...');
                            collection.refreshFromServer({
                                success: function(data){
                                    collection.add(data);
                                    collection.invoke('save');
                                    homepage = new Homepage.Views.Index({
                                        collection: collection
                                    }).render();
                                }
                            })
                        }else{
                            console.log('already loaded in localStorage...');
                            homepage = new Homepage.Views.Index({
                                collection: collection
                            }).render();
                        }
                    }
                });

            });

            Backbone.history.start();
        };
        return {
            initialize: initialize
        };
    }
);

ホームページ.js:

define([
    "jquery",
    "underscore",
    "backbone",
    "backbone.localStorage",
    "text!templates/homepage.html"
],
function($, _, Backbone, localStorage, homepageTemplate){
    "use strict";

    var Homepage = { Views: {} };

    Homepage.Model = Backbone.Model.extend({

        defaults: function(){
            return {
                homepageData: {}
            };
        }
    });

    Homepage.Collection = Backbone.Collection.extend({
        localStorage: new Backbone.LocalStorage("RGPData"),

        refreshFromServer: function(options) {
            return Backbone.ajaxSync('read', this, options);
        },

        url: 'json/test.json',

        model: Homepage.Model
    });

    Homepage.Views.Index = Backbone.View.extend({
        template:"homepage",
        el: '#mainContent',

        initialize: function(){
            this.listenTo(this.collection, 'change', this.render);
            this.listenTo(this.collection, 'destroy', this.remove);
        },

        render: function(){
            console.log('rendering...');
            $(this.el).html( homepageTemplate, this.collection);
            return this;
        }
    });

    return Homepage;
});

これが機能する方法として、アプリで localStorage アダプターを使用し、コレクションに "refreshFromServer" を配置して、localStorage が空の場合に JSON ファイルから読み取るようにします。コレクションは、ビューに挿入される前にルーターで取得されます。

これは、すべてがどのように機能するかを発見するのにかなりの時間を費やしたので、この回答が他の誰かが私よりも少しだけ足場を良くするのに役立つことを願っています.

テンプレートを取り込むために text.js を使用します。

別のメモとして、 backbone.localStorage を含めて、単に「バックボーン」として返そうとしました ( http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/に示されているように) が、何らかの理由でそれは機能せず、私のhomepage.jsファイルは「Backbone.Modelが定義されていません」と言い続けました。したがって、定義に両方を含めることになりました。

score 0 · Accepted Answer

これは正しくありません:

define([ // <- first bracket
    "app",
    ["localStorage"] // <- second bracket
],
function(app){
...

それはあなたのコードでどのようになっていますか、それともコピー＆ペーストのまぐれですか？

backbone.js - メイン レイアウトが読み込まれる前に読み込みを表示する

2 に答える 2

Related

Reference

backbone.js - メインレイアウトが読み込まれる前に読み込みを表示する