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

时间:2013-08-02 21:00:28

标签: javascript backbone.js marionette

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

1 个答案:

答案 0 :(得分:0)

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

Can I Use - CSS3 Selector

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

我还会看看{6}的IE 6-8功能

如果您支持IE< 6然后骨干断裂。

其他选择:

  • 您的数据真的是一个群组列表吗?
  • 可以将样式应用于容器元素吗?即UL border-right
  • 你最好不要在小组中设定一个号码但是要有回应吗?

可以理解的是,这些都是针对您的数据提出的建议,但取决于它是什么,以及您尝试做什么,实际上可能会有效。