backbone.js：更新模型，重新排序和重新渲染模型集合

Question

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

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

NB 我有一个backbone.js布局从示例todo app（这是第一个骨干应用程序）中逐字逐句提升。

Answer 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 。

上面的代码通过设置一个事件监听器来利用这一点，该监听器只需将任何change上的集合重新排序到其name的{​​{1}}属性。

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

View

就是这样:)）

---

Backbone documentation的相关摘录：

  

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