当子视图可用时开始 Backbone 路由 (backbone.layoutmanager)

Question

我用 Backbone.js 击中了一个令人头疼的问题。例子在jsfiddlehere上。我认为问题出在这里：

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个子视图，例如/#chapter/one、/#chapter/two等

如果我在 App.Layout 中明确设置子视图（请参阅 fiddle 中的第 49 行），路由会按预期工作。

但是，如果我尝试通过在 beforeRender 函数中迭代模型集合来添加视图（第 40 行；beforeRender 来自 backbone.layoutmanager），它们在路由器时似乎不可用尝试通过 ID 找到匹配的视图。

但是，一旦页面呈现，视图可以被激活：

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

这似乎表明视图已正确添加并且应该可以通过路由器找到：

App.Layout.getView(name);

毫无疑问，我只是忽略了一些东西，或者即将暴露我对 Backbone 库的无知。 :)

Answer 1

问题是您的导航和呈现不同步。我已经在此处更新了您的代码：http://jsfiddle.net/6h268r7j/55/

它在您使用声明性方法时有效，因为它们在渲染流程之外，基本上是静态添加的。一旦您使用 beforeRender/render，您现在就处于异步渲染流程中，它们将不会在您的路由器回调中可用。

修复方法是先渲染应用程序布局，然后触发路由：

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

当子视图可用时开始 Backbone 路由 (backbone.layoutmanager)

Start Backbone routing when sub-views are available (backbone.layoutmanager)

javascript

backbone.js

backbone-views

backbone-routing