在骨干路由器中使用初始化函数答案

【问题标题】：Using the initialize function in Backbone Router在骨干路由器中使用初始化函数
【发布时间】：2013-04-17 04:32:17
【问题描述】：

我正在使用 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);
    }
});

【问题讨论】：

标签： node.js backbone.js backbone-routing backbone.js-collections

【解决方案1】：

很可能，initialize 函数在调用 index 函数之前完成，但是您的 fetch 是异步的，因此当您尝试呈现您的 @ 时，集合还没有完成加载987654324@.

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);
            });
    }
});

【讨论】：

我有一个类似的解决方案，但我将 fetch 方法放在每个路由器方法中。问题在于，每次更改路由时都会发出 ajax 请求并且重新填充集合，当我已经拥有我需要的所有内容时，这会破坏集合的目的。我希望 Backbone 会延迟任何 Router 方法的启动，直到 initialize 方法和其中的任何内容执行完毕。感谢您的帮助！

【解决方案2】：

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

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

【讨论】：