Backbone.Marionette Layout + Region + View插入一个额外的元素，破坏Bootstrap样式

Question

我遇到了让Backbone.Marionette与Twitter Bootstrap合作的问题。 Bootstrap期望标记符合预定义模式以便工作，但Backbone和Marionette处理事物的方式似乎不可能使用Marionette.Layout为具有嵌入式下拉列表的导航栏生成兼容Bootstrap的标记。

问题在于：

假设我有Marionette.Layout代表导航栏，我希望有一个region，我会在其中放置管理项目的CollectionView或CompositeView下拉列表。 region是一个选择器，所以在这种情况下，如果我们有：

<div class="navbar">
  <ul class="nav">
    <li>Static item</li>
    <li id="dynamic-dropdown"></li>
  </ul>
</div>

然后布局将指定动态下拉列表的区域，如下所示：

Marionette.Layout.extend({
  regions: {
    dropdown: '#dynamic-dropdown'
  }
...
});

然后我会有一个CompositeView负责渲染下拉项目模型，指定Bootstrap下拉列表的额外标记，等等。问题是，似乎无法使#dynamic-dropdown成为$el的{​​{1}}，因为Backbone总是会插入额外的CompositeView（或者您在{{{ 1}}）。为了使下拉列表按预期显示，我需要删除该额外元素并使视图的根为div。

I've put together a jsfiddle说明了我的意思。

tl; dr如何使tagName的根元素成为#dynamic-dropdown中指定的区域？

Answer 1

您只需要确保最终生成的标记与Bootstrap所需的标记相同（使用控制台进行调试）。

所需的标记如下：

代码生成的标记存在以下问题：

因此，要解决此问题，您必须将nav模板更改为：

<script type="text/html" id="nav">
  <div class="navbar">
    <ul class="nav" id="dropdown">
    </ul>
  </div>
</script>

您的观点以呈现<li>而不是<div>

var DropdownItem = Marionette.ItemView.extend({
     tagName: 'li',
     template: "#dropdown-item"
});

var DropdownView = Marionette.CompositeView.extend({
    template: "#dropdown-collection",
    className: 'dropdown',
    tagName: 'li',
    itemView: DropdownItem,
    itemViewContainer: '#dropdown-items'
});

以下是工作版本：http://jsfiddle.net/7auhR/6/