Backbone.js BackboneJS-布局问题

当我需要3种不同的布局时，它如何与主干网一起工作？例如，当page1具有此布局时：

<div id="container">
    <div id="leftBlock">
      ...load view here...
    </div>
    <div id="centerBlock">
     ...load other views here...
    </div>
    <div id="rightBlock">
    ...load additional views here...
    </div>
</div>

…此处加载视图。。。
…在此处加载其他视图。。。
…在此处加载其他视图。。。

我的第二页的布局如下所示：

<div id="container">
   <div id="centerBlock">
     ...load other views here...
    </div>
</div>

<div id="container">
    <div id="topBlock">
    ...load additional views here...
    </div>
    <div id="leftBlock">
      ...load view here...
    </div>
    <div id="centerBlock">
     ...load other views here...
    </div>
    <div id="rightBlock">
    ...load additional views here...
    </div>
    <div id="bottomBlock">
    ...load additional views here...
    </div>
</div>

…在此处加载其他视图。。。

我的第三页看起来是这样的：

<div id="container">
   <div id="centerBlock">
     ...load other views here...
    </div>
</div>

<div id="container">
    <div id="topBlock">
    ...load additional views here...
    </div>
    <div id="leftBlock">
      ...load view here...
    </div>
    <div id="centerBlock">
     ...load other views here...
    </div>
    <div id="rightBlock">
    ...load additional views here...
    </div>
    <div id="bottomBlock">
    ...load additional views here...
    </div>
</div>

…在此处加载其他视图。。。
…此处加载视图。。。
…在此处加载其他视图。。。
…在此处加载其他视图。。。
…在此处加载其他视图。。。

---

我正在使用require/handlebar和文本插件…

我想你是在使用主干网吧？如果没有，您肯定想看看它，特别是对于您的用例，木偶有一个特殊的视图，叫做do Just want you want，非常简单：

在

木偶上定义一个区域
#容器
。应用程序
对象：

MyApp.addRegions({
容器：“容器”
});

对于每个布局，使用相应视图的区域定义一个

木偶.Layout

Layout1=Backbone.marionete.Layout.extend({
区域：{
leftBlock:#leftBlock“，
中心块：“#中心块”，
右块：“#右块”
}
});
Layout2=主干网.marionete.Layout.extend({
区域：{
中心块：“中心块”
}
});
Layout3=主干网.marionete.Layout.extend({
区域：{
topBlock:#topBlock“，
leftBlock:#leftBlock“，
中心块：“#中心块”，
rightBlock:#rightBlock“，
底部挡块：“底部挡块”
}
});

在每个布局的

onRender

回调中，创建每个视图并在其区域内显示它，例如：

//在布局2中
onRender:function（）{
show（新的LeftBlockView（））；
显示（新的CenterBlockView（））；
show（新的RightBlockView（））；
}

根据您的路线，在您的

#容器

区域中显示正确的布局

Router=Backbone.Router.extend({
路线：{
“第1页”：“第1页”，
“第2页”：“第2页”，
“第3页”：“第3页”，
}
第1页：函数（）{
MyApp.container.show（新布局1（））；
}
第2页：函数（）{
MyApp.container.show（新布局2（））；
}
第3页：函数（）{
MyApp.container.show（新布局3（））；
}
});

---

另请参阅木偶图，其中包含优秀的文档。

您应该使用布局容器来分隔容器内的不同布局

<div id="container">
  <div id="layout1">...</div>
  <div id="layout2">...</div>
</div>

---

这并不能直接回答问题。请落选的选民拿出建设性的态度，说明需要改进这个答案的地方吗？我已经删除了落选票，因为你已经改进了答案。