當子視圖可用時啓動骨幹路由（backbone.layoutmanager）

Question

我已經用Backbone.js命中了頭部劃痕。該示例在jsfiddle here上。我認爲這個問題是在這裏：

App.Layout = new Backbone.Layout({ 
// Attach the Layout to the main container. 
collection: App.chapters, 
el: "body", 
initialize: function() {}, 
beforeRender: function() { 
    // Add a sub-view for each Chapter 
    this.collection.each(function (model) { 
     this.insertView(model.get('id'), new App.ChapterView({ 
      "id": model.get('id') 
     })); 
    }, this); 
}, 
views: { 
    // But if I set the sub-view specifically if works 
    // "one": new App.ChapterView({id: 'one' }) 
} 
}); 

綜上所述，路由器應該簡單地激活或取消backbone.layoutmanager子視圖基於路徑，例如，/＃章/一個/＃章/兩，等上

如果我明確設置App.Layout中的子視圖（請參閱小提琴中的第49行），則路由按預期工作。但是，如果我嘗試通過迭代beforeRender函數中的模型集合（第40行; beforeRender來自backbone.layoutmanager）來添加視圖，它們在路由器嘗試查找時似乎不可用通過ID匹配視圖。

一旦頁面渲染，但是，鑑於可以與激活：

App.router.navigate('/chapter/two',{"trigger": true}); 

這似乎表明，適當添加的意見，並應通過與路由器瑪麗薩：

App.Layout.getView(name); 

毫無疑問，我只是忽略了一些東西，或者即將暴露我對骨幹庫的無知。 :)

Answer 1

問題是您正在導航和呈現不同步。我在這裏更新了代碼：http://jsfiddle.net/6h268r7j/55/

它在您使用聲明性方法時起作用，因爲它們在渲染流之外，基本上是靜態添加的。只要您使用beforeRender/render，您現在處於異步渲染流程中，並且它們將不會在您的路由器回調中可用。

的修復程序是簡單地第一渲染應用佈局然後觸發路由：

App.Layout.render().then(function() { 
    Backbone.history.start(); 
});