我有一个集合和相应的项目视图。最初渲染时,复合视图每隔三个项目发送一个indexClass
,以便它可以正确显示。itemView
现在,比如说,我想从集合中删除该项目,并更新视图。我现在需要重新渲染分配新indexClass
es 的整个集合。现在,它从复合视图中删除了该项目,但所有其他项目视图仍然具有与以前相同的类——弄乱了样式。
我该怎么做?这里有任何性能问题吗?
我也想过只使用 CSS3 选择器:nth-child(3n)
来省去麻烦。样式并不重要,因此即使浏览器不支持 CSS3 也可以。
var ListItemView = Backbone.Marionette.ItemView.extend({
template: '#list-item',
tagName: 'li',
events: {
'click .delete': 'delete'
},
onRender : function () {
if (this.options.indexClass) {
this.$el.addClass(this.options.indexClass);
}
},
delete: function() {
this.model.collection.remove(this.model);
}
});
var ListComposite = Backbone.Marionette.CompositeView.extend({
itemView: ListItemView,
itemViewContainer: "ul",
itemViewOptions : function (model, index) {
if ((index + 1) % 3 == 0) {
return { indexClass: "rowend" };
} else {
return {};
}
},
template: "#list"
});