twitter-bootstrap - 使用 Backbone.Marionette 呈现 Twitter Bootstrap 兼容的选项卡标记

Question

我正在选择一个 JavaScript MVC 框架，以供 UI 小组决定使用 Twitter Bootstrap 来设置样式和基本 UI 组件的团队使用。这意味着如果我们要渲染 Bootstrap Tabs我需要能够分别为选项卡标签和选项卡 Pane 呈现兄弟标记。我喜欢 Marionette 作为比 Backbone 本身更高级别的框架，但不像 Ember 那样复杂。但是，我在尝试构建显示选项卡 ala Bootstrap 所需的标记时遇到了问题。

我相信我需要将“选项卡”作为一个整体使用布局，并使用“标签”区域和“ Pane ”区域，使用 CollectionView 分别呈现每个区域。但是，由于每个 View 都需要它自己的 HTML 元素，因此在我的集合标记周围放置了一个“div”，位于标签/ Pane 容器及其各自的项目之间。

我整理了一个 jsFiddle example这说明了这一点。

我的问题是:

1) 这是组织集合渲染的正确方法，其中您有两个或多个 View 渲染的所述集合需要是 DOM 中的 sibling ？

2)如果是，有没有办法让你的区域元素成为你的 Collection View 的根，而不是中间的 HTML 元素？

注意:

我确实看到了 possible answer to my first question ，但这似乎是为项目集合生成单个标题。

我也确实看到了 possible answer to part-two of my question ，但这似乎暗示您仍在生成 HTML 元素。

Answer 1

1) 是的，我就是这样做的。重用同一个集合可确保两个 Collection View 保持同步，以防集合被动态修改。

2)简短的回答是否定的。长答案是你必须重写一些方法来实现这一点。很容易到CollectionView的el与该地区相同，但如果 View 关闭，则此 el将从 DOM 中删除，使该区域不可用。