Marionette:从集合中删除后,每隔三个itemView就重新分配一个类

Marionette: Reassign class to every third itemView after removing from collection

本文关键字:itemView 三个 新分配 一个 分配 集合 删除 Marionette      更新时间:2023-09-26

我有一个集合和相应的项目视图。在最初渲染时,复合视图每隔三个项目向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"
    });

CSS 3选择器是最好的选择(无论如何,它更像是一个外观问题)

我可以使用-CS3 Selector 吗

看起来全球87.18%的使用对它有利

我还想看看Selectivizr的IE 6-8功能

如果您支持IE<6好,然后脊椎骨折。

其他选项:

  • 您的数据真的是组列表吗
  • 样式可以应用于容器元素吗?即UL边界权
  • 如果你在一个小组中没有一个固定的号码,但反应灵敏,你会更好吗

可以理解的是,这些都是针对你的数据的现成建议,但取决于它是什么,以及你试图做什么,一个可能真的有效。