Question

我想显示如下菜单：

Obi Wan Kenobi
  My friends
  Options

My lightsabers
  Blue lightsaber
  Green lightsaber 
  Add a lightsaber

如您所见，My lightsabers菜单是一个项目列表，但添加新光剑的链接是独立的。

我相信我应该使用CollectionView来渲染光剑列表，但是如何渲染“添加”链接？

你有这种菜单的例子吗？

这个问题可以概括为：如何自定义Marionette呈现的HTML内容而不会破坏它的作用？

Answer 1

由于需要添加链接，我会使用CompositeView。

您可以设置一个模板，其中包含实际列表的占位符，然后还有添加链接和所有必要的其他位。然后修改复合视图的appendHtml方法，将实际项目放在正确的位置。

例如，这是一个让你走上正轨的模板：

<script id="light-saber-menu-template" type="text/html">
  <h4>My Lightsabers</h4>
  <ul id="light-sabers">
    <li class="divider"></li>
    <li><a href="#">Add A Lightsaber</a></li>
  <ul>
</script>

<script id="light-saber-menu-item-view" type="text/html">
  <%= name %>
</script>

在这个例子中，我会使用divider ul作为放置项目的位置，将它们插入到分隔符之前：


MenuItem = Backbone.Marionette.ItemView.extend({
  template: "#light-saber-menu-item-template",
  tagName: "li"
});

MenuView = Backbone.Marionette.CompositeView.extend({
  template: "#light-saber-menu-template",

  itemView: MenuItem,

  appendHtml: function(cv, iv){
    var $divider = cv.$(".divider");
    $divider.before(iv.el);
  }
});

myLightSabers = new LightSaberCollection(... data ...);

menu = new MenuView({
  collection: myLightSabers
});

menu.render();

这应该会产生一个<ul>，其中包含您期望的项目：

<div>
  <h4>My Lightsabers</h4>
  <ul>
    <li>Blue</li>
    <li>Green</li>
    <li>Red</li>
    <li class="divider"></li>
    <li><a href="#">Add A Lightsaber</a></li>
  </ul>
<div>

有关使用CompositeView的更多示例，请参阅此博文：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

使用哪个组件来实现菜单？

1 个答案: