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子视图，例如/＃chapter / one，/＃chapter / two等。

如果我在App.Layout中明确设置了子视图（参见小提琴中的第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）

1 个答案: