主干.js：更新模型，重新排序和重新渲染模型集合答案

【问题标题】：backbone.js: Update model, re-sort and re-render models collection主干.js：更新模型，重新排序和重新渲染模型集合
【发布时间】：2012-04-22 03:59:19
【问题描述】：

在我的应用程序中，我有一个 socket.io 连接，它正在监听后端并获取客户端浏览器持有的模型的更新（它通过 id 检索模型并在模型属性上调用 set）。

我希望对集合进行排序，然后将其作为一个整体重新渲染，以反映由于 set 导致的模型上的任何新排序（大多数示例似乎是围绕单个视图进行重新-渲染）。有什么方法可以做到这一点？

注意我已经从示例 todo 应用程序（这是第一个主干应用程序）中一字不差地提升了一个骨干.js 布局。

【问题讨论】：

标签： backbone.js socket.io

【解决方案1】：

您可以通过为您的集合提供comparator 方法来实现您想要的。

示例：

ModelCollection = Backbone.Collection.extend({
    comparator: function(a, b) {
        if ( a.get("name") > b.get("name") ) return 1;
        if ( a.get("name") < b.get("name") ) return -1;
        if ( a.get("name") === b.get("name") ) return 0;
    },

    initialize: function() {
        this.on('change:name', function() { this.sort() }, this);
    }
});

此示例中的comparator 将使您的集合按内部模型的name 属性升序排序。

请注意，您的集合在更改其任何models 的属性时不会自动排序。默认情况下，排序仅在创建新模型并将它们添加到集合时发生；但是comparator 将被collection.sort 方法使用。

上面的代码通过设置一个事件侦听器来利用这一点，该侦听器只是将任何changes 上的集合重新排序为其models 的name 属性。

为了完成图片，我们在与集合关联的View 中设置了一个适当的事件侦听器，以确保它在任何更改时重新呈现：

CollectionView = Backbone.View.extend({
    initialize: function() {
        this.collection = new ModelCollection();
        this.collection.on('all', function() { this.render() }, this);
    },

    render: function() {
        this.$el.html(this.collection.toJSON());
    }
});

就是这样:)

来自Backbone documentation的相关摘录：

默认情况下，集合没有comparator。如果您定义了comparator，它将用于按排序顺序维护集合。这意味着随着模型的添加，它们将插入到collection.models 中的正确索引处。比较器可以定义为sortBy（传递一个接受单个参数的函数）、sort（传递一个需要两个参数的比较器函数），或者作为一个字符串来指示要排序的属性。 [...] 如果您以后更改模型属性，带有comparator 的集合将不会自动重新排序，因此您可能希望在更改会影响顺序的模型属性后调用sort。

【讨论】：