1

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

1 回答 1

2

一种选择是使用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;
  },
});
于 2013-08-02T03:09:33.480 回答