2 
<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 也没有经验，所以可能有更好的方法来解决这个问题，我只是不确定。

4

1 回答 1

4

我会使用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，那么通常会有更好的方法来做到这一点。

于 2013-04-30T23:10:27.280 回答