我想我不太明白正确使用 Backbone 路由器背后的想法。这是我得到的:
我有一些数据在页面加载时从服务器获取,然后将其打包到模型和集合中。这些模型和系列的数量是不确定的。我想使用路由器能够从一开始就直接渲染某个集合的 View 。
问题是: Backbone 路由器启动得很早,因为我要求它访问某个 View 并触发它的render
行动,它不能这样做,因为尚未创建这些 View 。这意味着我实际上必须在获取完成后启动我的路线。
我不知道这是否是正确的方法,但我想出的唯一想法是:
Backbone.history.start();
位到一个单独的顶级可访问函数中(即准备稍后手动调用它)。 success
运行回调我收藏的fetch()
_.defer()
和 _.once()
. 这行得通,但它确实看起来很奇怪:
路由器:
window.startRoutes = _.once(function() {
var AccountPage = Backbone.Router.extend({
routes: {
'set/:id': 'renderSet',
},
renderSet: function(setId) {
/** … **/
// Call the rendering method on the respective CardView
CardsViews[setId].render();
}
});
var AccountPageRouter = new AccountPage;
Backbone.history.start();
});
收藏:
window.CardsCollection = Backbone.Collection.extend({
model: Card,
initialize: function(params) {
/** … **/
// Get the initial data
this.fetch({success: function() {
_.defer(startRoutes);
}});
},
});
所以我的问题是……我做得对吗?还是有更好的方法来做到这一点(必须)?
最佳答案
您可以提前定义您的路由器;在你调用 Backbone.History.start() 之前它不会做任何事情。
您可以在您的收藏上绑定(bind)“重置”事件以启动历史记录,如下所示:
my_collection.bind("reset", _.once(Backbone.History.start, Backbone.History))
然后,当您的集合完全加载时,路由器将开始做一些事情。我不确定这是否正是您正在寻找的(因为您提到拥有可变数量的集合)。
我也有类似的情况,只是在开始路由之前我提前知道要加载哪些集合。我在路由器中添加了一个 startAfter 方法,如下所示:
window.Workspace = new (Backbone.Router.extend({
. . .
startAfter: function(collections) {
// Start history when required collections are loaded
var start = _.after(collections.length, _.once(function(){
Backbone.history.start()
}))
_.each(collections, function(collection) {
collection.bind('reset', start, Backbone.history)
});
}
}));
然后在我设置了我的收藏之后
Workspace.startAfter([collection_a, collection_b, ...])
这也可以适用于独立模型,尽管我认为您需要绑定(bind)到“重置”事件以外的其他东西。
我很高兴阅读了您的示例代码,_.once 和 _.defer 的使用为我指明了正确的方向。
关于routes - Backbone 路由器 : wait for data to be fetched first,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7822542/