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

Question

我正在努力选择一个JavaScript MVC框架,以便在UI团队决定使用Twitter Bootstrap进行样式化和基本UI组件的团队中使用.这意味着如果我们要渲染Bootstrap Tabs,我需要能够分别为tab-labels和tab-pane渲染兄弟标记.我喜欢Marionette作为比Backbone本身更高级别的框架,但不像Ember那么复杂.但是,我在尝试构建显示标签ala Bootstrap所需的标记时遇到了问题.

我相信我需要使用"标签"的布局作为一个整体,带有"标签"的区域和"窗格"的区域,使用CollectionView分别渲染每个.但是,由于每个视图都需要它自己的HTML元素,因此在标签/窗格容器和各自的各个项目之间有一个"div"放置在我的收藏标记周围.

我把一个说明这个的jsFiddle示例放在一起.

我的问题是:

1)这是组织渲染集合的正确方法,其中您有两个或多个所述集合的视图渲染,需要在DOM中作为兄弟姐妹吗？

2)如果是,是否有办法让您的region元素成为集合视图的根,而不是中间HTML元素？

注意:

我确实看到了第一个问题的可能答案,但这似乎是为一组项目生成单个标题.

我也确实看到了对我的问题的第二部分的可能答案,但它似乎暗示你仍在生成一个HTML元素.

Answer 1

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

2）简短的回答是否定的。长的答案是您必须重写一些方法才能实现此目的。很容易与CollectionView区域el相同，但是如果视图关闭，这el将从 DOM 中删除，导致该区域不可用。