我正在选择一个 JavaScript MVC 框架，以供 UI 小组决定使用 Twitter Bootstrap 来设置样式和基本 UI 组件的团队使用。这意味着如果我们要渲染引导选项卡，我需要能够分别为选项卡标签和选项卡窗格呈现兄弟标记。我喜欢 Marionette 作为比 Backbone 本身更高级别的框架，但不像 Ember 那样复杂。但是，我在尝试构建显示选项卡 ala Bootstrap 所需的标记时遇到了问题。
我相信我需要将“选项卡”作为一个整体使用布局，并使用“标签”区域和“窗格”区域，使用 CollectionView 分别呈现每个区域。然而，由于每个视图都需要它自己的 HTML 元素，因此在我的集合标记周围放置了一个“div”，位于标签/窗格容器及其各自的项目之间。
我整理了一个jsFiddle 示例来说明这一点。
我的问题是：
1) 这是组织集合渲染的正确方法，其中您有两个或多个视图渲染的所述集合需要是 DOM 中的兄弟姐妹？
2）如果是，有没有办法让你的区域元素成为你的集合视图的根，而不是中间的 HTML 元素？
笔记：
我确实看到了第一个问题的可能答案，但这似乎是为一组项目生成单个标题。
我也确实看到了我的问题第二部分的可能答案，但这似乎暗示您仍在生成 HTML 元素。