0

Node/express と Mongodb を使用して、最初のバックボーン アプリを作成中です。このアプリは、最初のページの読み込み時に mongo からすべてのデータを収集し、それをバックボーン コレクションにプッシュするオンライン フード メニューおよび注文システムです。バックボーン ルーターの初期化関数を使用して、データを fetch() し、コレクションに入れています。私の問題は、Initialize 関数が完了する前にインデックス Router がロードされていることです。ブラウザのコンソールでコレクションにアクセスできるので、initialize 関数が正しく動作することを確認しました。

私はこれを間違った方法で行っているかもしれませんが、これは私のルーターの簡略化されたバージョンです:

GDB.Router = Backbone.Router.extend ({
    routes: {
        '': 'index',
        'drinks': 'drinks'
    },

    meals: {},

    initialize: function() {
        meals = new GDB.Collections.Meals
        meals.fetch();
    }, 

    index: function() {
            var mealsView = new GDB.Views.Meals ({collection: meals});
            $('#GDBContainer').append(mealsView.render().el);           
    },

    drinks: function() {
            var drinksView = new GDB.Views.Meals ({collection: meals.byCategory('drinks')});
            $('#GDBContainer').append(drinksView.render().el);
    }
});
4

2 に答える 2

3

ほとんどの場合、initialize関数はindex関数が呼び出される前に終了していますfetchが、非同期であるため、レンダリングを試みたときにコレクションの読み込みが完了していませんmealsView。

GDB.Router = Backbone.Router.extend ({
    routes: {
        '': 'index',
        'drinks': 'drinks'
    },

    initialize: function() {
        this.meals = new GDB.Collections.Meals
        // fetch returns a jquery promise
        this.fetchingMeals = this.meals.fetch();
    }, 

    index: function() {
            var self = this;
            // maybe show loading spinner here
            $('#GDBContainer').html('<div>Loading</div>');

            this.fetchingMeals.done(function(){
                // now this.meals is done fetching!
                var mealsView = new GDB.Views.Meals ({collection: self.meals});
                $('#GDBContainer').html(mealsView.render().el);  
            });         
    },

    drinks: function() {
            var self = this;
            // maybe show loading spinner here
            $('#GDBContainer').html('<div>Loading</div>');

            this.fetchingMeals.done(function(){
                var drinksView = new GDB.Views.Meals ({collection: self.meals.byCategory('drinks')});
                $('#GDBContainer').html(drinksView.render().el);
            });
    }
});
于 2013-04-17T06:01:37.493 に答える
0

ポールのソリューションを使用するか、ビューでコレクションの追加/リセット/その他のイベントを聞くことができます。

view.listenTo(model, 'reset', view.render);
于 2013-04-17T06:12:46.167 に答える