0

我正在使用 Node/express 和 Mongodb 创建我的第一个主干应用程序。该应用程序是一个在线食品菜单和订购系统，它在第一页加载时从 mongo 收集所有数据并将其推送到 Backbone 集合中。我正在使用主干路由器中的初始化函数来获取（）数据并将其放入集合中。我的问题是在 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

您可以使用 Paul 的解决方案，或者在视图中收听集合的 add/reset/whatever 事件。

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