木偶：从集合中删除后，将类重新分配给每三个 itemView答案

【问题标题】：Marionette: Reassign class to every third itemView after removing from collection木偶：从集合中删除后，将类重新分配给每三个 itemView
【发布时间】：2013-08-03 06:08:05
【问题描述】：

我有一个集合和相应的项目视图。初始渲染时，复合视图每隔三个项目向itemView 发送一个indexClass，以便它可以正确显示。

现在，比如说，我想从集合中删除该项目，并更新视图。我现在需要重新渲染整个集合，分配新的indexClasses。现在，它从复合视图中删除了该项目，但所有其他项目视图仍然具有与以前相同的类——破坏了样式。

我该怎么做？这里有任何性能问题吗？

我也想过使用 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"
    });

【问题讨论】：

您需要再次渲染整个视图。由于您的逻辑与类逻辑捆绑在一起
我使用 CSS3 来做类似的事情，它工作得很好，如果你担心兼容性，你可以使用 jQuery 来为你做。 api.jquery.com/nth-child-selector

标签： javascript backbone.js marionette

【解决方案1】：

CSS 3 选择器是最好的选择（无论如何它更多的是外观问题）

Can I Use - CSS3 Selector

看起来 87.18% 的全球使用量对它有好处

我还会查看 Selectivizr 的 IE 6-8 功能

如果你很好地支持 IE

其他选项：

您的数据真的是组列表吗？
样式可以应用于容器元素吗？即 UL 右边框
您最好不要在一个组中设置一个号码，而是响应迅速？

可以理解，这些是针对您的数据的现成建议，但取决于它是什么，以及您尝试做的事情可能真的有效。

【讨论】：

感谢您的所有建议，Hurricanepkt。我最终选择了 CSS3 选择器。