Question

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

Answer 1

最有可能的是，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);
            });
    }
});

Answer 2

您可以使用Paul的解决方案，或者在视图中收听集合的添加/重置/任何事件。

view.listenTo(model, 'reset', view.render);

使用Backbone Router中的初始化功能

2 个答案: