尝试使用 Bootstrap 和 Marionette、兄弟标签呈现动态下拉列表答案

【问题标题】：Trying to render dynamic dropdowns using Bootstrap and Marionette, sibling tag尝试使用 Bootstrap 和 Marionette、兄弟标签呈现动态下拉列表
【发布时间】：2013-04-30 22:17:45
【问题描述】：

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">{{model.name}}</a>
    </li>
  </ul>
</div>

这是引导程序下拉所需的基本代码

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>

这是我需要作为菜单项（文件、编辑等）呈现的代码，问题是保存菜单列表项的兄弟标签

我会使用这样的东西：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{name}}</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>

然后我想将菜单列表项渲染到 'ul.dropdown-menu' 元素中：

<li role="presentation">
   <a role="menuitem" tabindex="-1" href="#">{{name}}</a>
</li>

这是我的木偶视图：

var menuItem = Marionette.ItemView.extend({
    tagName: 'a',
    attributes: {
        'class': 'dropdown-toggle',
        'data-toggle': 'dropdown',
        'href': '#'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html('test').after('<b>bam?</b>');

        return this;
    }
});

每当我调用渲染函数并尝试操作创建时设置的 this.el 之外的数据时，它永远不会附加到标记之后。仅在内部（所以我在 a 标签内看到“测试”，但没有看到“bam？”。任何人有任何处理兄弟元素的技巧吗？

我在 Backbone / Marionette 方面也没有经验，所以可能有更好的方法来解决这个问题，我只是不确定。

【问题讨论】：

标签： backbone.js marionette backbone-views

【解决方案1】：

我会使用Marionette.CompositeView 来执行此操作，并且根本不会覆盖渲染。

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

DropDownMenuView = Backbone.Marionette.CompositeView.extend({
  itemView: DropDownItemView,
  // specify a jQuery selector to put the itemView instances in to
  itemViewContainer: "ul",
  template: "#drop-down-menu-template"
});

我发现使用 Backbone.Marionette 的一般经验法则是，如果您正在操纵 $el，那么通常会有更好的方法来做到这一点。

【讨论】：