javascript - Marionette:使用索引向 ItemView 添加类

Question

我目前有一个复合 View ，我希望每个 ItemView 都根据其索引进行呈现。

例如，我想向每三个 ItemView 添加一个类。

我倾向于的解决方案是更改 appendHtml() 以每三次向 View 添加一个类。我已将此代码放在下面。

使用 getItemView() 有什么好处吗？我看到的一个缺点是它不能直接访问索引。

模板

<script id="list-item" type="text/html">
  <%= name %>
</script>

<script id="list-layout" type="text/html">
    <div class='collection'>
        <h3><%= name %></h3>
        <ul></ul>
    </div>
</script>

JS

var ListItemView = Backbone.Marionette.ItemView.extend({
  template: '#list-item',
  tagName: 'li'
});

var ListComposite = Backbone.Marionette.CompositeView.extend({
  itemView: ListItemView,
  itemViewContainer: "ul",

  template: '#list-layout',

  appendHtml: function(cv, iv, index){
    if ((index + 1) % 3 == 0) iv.$el.addClass('rowend');

    var $container = this.getItemViewContainer(cv);
    $container.append(iv.el);
  }
});

Answer 1

一个选择是使用 buildItemView

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-builditemview

现在您将不能直接访问索引，但是您可以使用下划线方法来解决这个问题(这些都应该被扩充到 Backbone 集合中，特别是这个 http://underscorejs.org/#indexOf )。

您获得的主要好处是您可以直接影响项目 View 的类

var ListComposite = Backbone.Marionette.CompositeView.extend({
  itemView: ListItemView,
  itemViewContainer: "ul",

  template: '#list-layout',

  buildItemView: function(item, ItemViewType, itemViewOptions){
       var index = this.collection.indexOf(item);

       var options = _.extend({model: item}, itemViewOptions, {className:"someClassName" + index});

       var view = new ItemViewType(options);

       return view;
  },
});