sorting - 订购 Backbone View 和集合

Question

我有一个集合，其中包含一些应该在列表中访问的项目。

因此，集合中的每个元素都有其自己的view元素，然后将其添加到DOM到一个容器中。

我的问题是:
如何将通过比较器功能在集合中获得的排序顺序应用于DOM？
第一个渲染很容易:您遍历集合并创建所有 View ，然后按照正确的顺序将它们添加到容器元素。

但是，如果模型发生更改并由集合重新排序怎么办？如果添加元素怎么办？我不想重新渲染所有元素，而是只更新/移动必要的DOM节点。

Answer 1

模型添加

添加元素的路径非常简单，因为当将模型添加到集合时，您会在选项中获得index。该索引是排序的索引，基于该索引，如果您有一个简单的 View ，则应该很容易在特定索引处插入 View 。

排序属性更改

这个有点棘手，我没有一个方便的答案(有时我也为此感到苦恼)，因为在您更改模型在何时被排序的属性后，集合不会自动重新排列其顺序您最初添加了它。

Backbone 文档中的:

Collections with comparator functions will not automatically re-sort if you later change model attributes, so you may wish to call sort after changing model attributes that would affect the order.

因此，如果您在集合上调用sort，则会触发 reset事件，您可以将其挂接以触发整个列表的重绘。

在处理相当长的列表时，它的效率非常低，并且可能严重降低用户体验，甚至导致挂起

因此，您可以摆脱的几件事就是知道您可以:

通过调用collection.indexOf(model)

总是在排序后找到模型的索引

从add事件(第三个参数)获取模型的索引

编辑:

在考虑了一下之后，我想到了这样的事情:

var Model = Backbone.Model.extend({
    initialize: function () {
        this.bind('change:name', this.onChangeName, this);
    },
    onChangeName: function ()
    {
        var index, newIndex;

        index = this.collection.indexOf(this);
        this.collection.sort({silent: true});
        newIndex = this.collection.indexOf(this);
        if (index !== newIndex)
        {
            this.trigger('reindex', newIndex);
            // or
            // this.collection.trigger('reindex', this, newIndex);

        }
    }
});

然后您认为您可以听

var View = Backbone.View.extend({
    initialize: function () {
        this.model.bind('reindex', this.onReindex, this);
    },
    onReindex: function (newIndex)
    {
        // execute some code that puts the view in the right place ilke
        $("ul li").eq(newIndex).after(this.$el);
    }
});