Marionette:使用索引将类添加到ItemView

Marionette: Use index to add class to ItemView

本文关键字：添加 ItemView 索引 Marionette      更新时间：2023-09-26

我目前有一个复合视图，我希望每个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);
  }
});

一个选项是使用buildItemView

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

现在您不能直接访问索引，但可以使用下划线方法来解决这个问题（这些方法都应该扩展到主干集合中，尤其是这个集合http://underscorejs.org/#indexOf)。

你得到的主要好处是，你可以直接影响itemviews 的类

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;
  },
});
相关文章：