木偶：使用索引添加類到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

回答

相關問題