0

我想显示一个菜单，如：

欧比旺克诺比
  我的朋友
  选项

我的光剑
  蓝色光剑
  绿色光剑
  添加光剑

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

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

你有这样的菜单的例子吗？

这个问题可以概括为：如何自定义 Marionette 呈现的 HTML 位而不破坏它所做的事情？

4

1 回答 1

3

我会为此使用 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>

在此示例中，我将使用dividerul 作为放置项目的位置，将它们插入到分隔符之前：


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/

于 2012-05-08T13:33:21.417 回答