javascript - Marionette:从集合中删除后，将类重新分配给每三个 itemView

Question

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

现在，假设我想从集合中删除该项目，并更新 View 。我现在需要重新渲染整个集合并分配新的 indexClasses。现在，它从复合 View 中删除了该项目，但所有其他项目 View 仍然具有与之前相同的类 - 搞乱了样式。

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

我还考虑过使用 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"
    });

Answer 1

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

Can I Use - CSS3 Selector

看起来 87.18% 的全局使用率对其有好处

我还会查看Selectivizr适用于 IE 6-8 功能

如果您很好地支持 IE < 6，那么 Backbone 就会崩溃。

其他选项:

• 您的数据真的是组列表吗？
• 该样式可以应用于容器元素吗？即 UL 右边界
• 如果群组中没有固定人数，但要积极响应，您会更好吗？

可以理解，这些都是针对您的数据的不切实际的建议，但取决于数据是什么以及您正在尝试做什么，其中可能确实有效。