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

我目前有一个复合视图，我希望每个ItemView根据其索引进行渲染。木偶：使用索引添加类到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>

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

来源

2013-08-01 Will M

在http://stackoverflow.com/questions/17533172/different-styling-on-the-看看第三纪录中骨干牵引杆 –

谢谢大卫。在那里提供的解决方案似乎在概念上更合理。 –

一种选择是使用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-02 03:09:33 Scott

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

回答

相关问题