1

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

现在,比如说,我想从集合中删除该项目,并更新视图。我现在需要重新渲染分配新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"
    });
4

1 回答 1

0

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

我可以使用 - CSS3 选择器

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

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

如果你很好地支持 IE < 6,那么主干就会中断。

其他选项:

  • 您的数据真的是组列表吗?
  • 样式可以应用于容器元素吗?即 UL 右边界
  • 你最好不要在一个组中没有一个固定的数字而是响应?

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

于 2013-08-02T22:08:05.177 回答