0

我在让 Backbone.Marionette 与 Twitter Bootstrap 合作时遇到了问题。Bootstrap 期望标记符合预定义的模式才能工作，但是 Backbone 和 Marionette 处理事情的方式，似乎不可能使用 aMarionette.Layout为带有嵌入式下拉菜单的导航栏生成符合 Bootstrap 的标记。

这是问题所在：

假设我有一个Marionette.Layout代表导航栏，并且我想要一个region，我将在其中放置CollectionVieworCompositeView来管理下拉列表中的项目。是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成为$elfor the CompositeView，因为 Backbone 总是插入一个额外的div（或您在 中指定的任何内容tagName）。为了使下拉菜单按预期显示，我需要去掉那个额外的元素并让视图的 root 成为#dynamic-dropdown。

我整理了一个 jsfiddle 来说明我的意思。

tl;dr 如何使 aView的根元素成为 a 中指定的区域Marionette.Layout？

4

1 回答 1

4

您只需要确保最终生成的标记符合 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/

于 2013-02-02T19:36:08.517 回答