5

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

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

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

4

1 回答 1

12

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上面的代码通过设置一个事件侦听器来利用这一点，该侦听器只是将任何s 上的集合重新排序name为其models.

为了完成这幅图，我们在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());
    }
});

而已 ：）

骨干文档的相关摘录：

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

于 2012-04-22T07:42:02.803 回答