Question

我目前有一个复合视图，我希望每个ItemView根据其索引进行渲染。

例如，我想为每三分之一ItemView添加一个类。

我倾向于解决的问题是改变appendHtml()每三次向视图添加一个类。我在下面列出了这个代码。

使用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

现在你不能直接访问索引，但你可以使用下划线方法来解决这个问题（这些方法应该全部扩展到主干集合，特别是这一个http://underscorejs.org/#indexOf）。

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

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;
  },
});

木偶：使用索引将类添加到ItemView

1 个答案: