Twitter bootstrap 使用主干网呈现Twitter引导兼容标签标记。木偶

我正在努力选择一个JavaScript MVC框架，以便在一个团队中使用，在这个团队中，UI小组已经决定使用Twitter引导来设计样式和基本UI组件。这意味着，如果我们要渲染，我需要能够分别渲染选项卡标签和选项卡窗格的同级标记。我喜欢木偶作为比主干本身更高层次的框架，但不像余烬那样复杂。然而，我在尝试建立必要的标记以显示标签和引导时遇到了问题

我认为我需要为“选项卡”整体使用一个布局，其中一个区域用于“标签”，另一个区域用于“窗格”，使用CollectionView分别渲染每个选项卡。但是，由于每个视图都需要自己的HTML元素，因此在我的集合标记周围放置了一个“div”，位于标签/窗格容器及其各自的项目之间

我已经整理了一个例子来说明这一点

我的问题是：

1） 这是组织集合渲染的正确方法吗？如果该集合有两个或多个视图渲染，并且这些视图渲染需要在DOM中是同级的

2） 如果是，有没有办法让region元素成为集合视图的根元素，而不是中间的HTML元素

注意：

我确实看到了一个，但它似乎是用于为项目集合生成单个标题的

我也看到了，但这似乎暗示您仍在生成HTML元素。

1）是的，我会这样做。重用同一集合可确保在动态修改集合时两个集合视图保持同步

---

2） 简短的答案是否定的。长的答案是你必须覆盖一些方法来实现这一点。很容易将

CollectionView

的

el

设置为与区域相同，但是如果视图关闭，则该

el

将从DOM中删除，从而使区域无法使用。

谢谢！，因此，在这种情况下，最好将HTML程序集放在模板中。实际上，我最终不得不将Marionette.CompositeView子类化，并重写许多方法。我假设有一种更优雅的方法来实现这一点……为什么不在两个不同的视图中重复使用同一个集合两次呢？我倾向于使用

Layout

和

CollectionView

而不是

CompositeView

——更多的声明，但更少的覆盖。这确实是我开始采取的路线，但我遇到了一个问题，即必须为每个视图插入一个元素。如果你看看我的，你会看到我是如何按照你建议的方法组织事情的。如果有更好的方法，我可以利用木偶提供的视图，一定要让我知道。我更喜欢重用而不是子分类。我更新了将区域显示移动到布局的

onRender

，这就是我显示所有布局区域的方式。