Question

我有一个骨架集合，在表格中呈现。我想基于集合具有的某些属性使表可排序，例如“task_status”，“task_group”。我正在阅读有关collection.comparator，nd collection.sort的主干文档。我怎么能这样做？

Answer 1

comparator函数用于比较集合中的两个模型，它可以以任何（一致）方式比较它们。特别是，它可以选择使用哪个模型属性，因此您可以在集合中使用这样的内容：

initialize: function() {
    this.sort_key = 'id';
},
comparator: function(a, b) {
    // Assuming that the sort_key values can be compared with '>' and '<',
    // modifying this to account for extra processing on the sort_key model
    // attributes is fairly straight forward.
    a = a.get(this.sort_key);
    b = b.get(this.sort_key);
    return a > b ?  1
         : a < b ? -1
         :          0;
}

然后你只需要集合上的一些方法来更改sort_key并调用sort：

sort_by_thing: function() {
    this.sort_key = 'thing';
    this.sort();
}

在较旧的Backbones中，调用sort会触发"reset"事件，而较新的版本会触发"sort"事件。要涵盖这两种情况，您可以收听这两个事件并重新渲染：

// in the view...
initialize: function() {
    this.collection.on('reset sort', this.render, this);
}

演示：http://jsfiddle.net/ambiguous/7y9CC/

您也可以使用listenTo代替on来帮助您避免僵尸：

initialize: function() {
    this.listenTo(this.collection, 'reset sort', this.render);
}

演示：http://jsfiddle.net/ambiguous/nG6EJ/

Answer 2

@ mu-is-too-short的答案很好，除了有一种比较字段值更简单的方法：

基于字段对集合进行排序的最简单方法是提供比较器函数，该函数返回要排序的确切字段值。这种比较器使Backbone调用sortBy函数，而不是sort，然后它自己进行复杂的比较，你不必担心逻辑。

因此，实质上，您不必提供复杂的比较器功能，除非您对确定订单有更高级的需求。

var myCollection = Backbone.Collection.extend({
    sort_key: 'id', // default sort key
    comparator: function(item) {
        return item.get(this.sort_key);
    },
    sortByField: function(fieldName) {
        this.sort_key = fieldName;
        this.sort();
    }
});

在此之后，您可以使用表示要排序的键的字符串调用集合的sortByField函数。例如：

collection.sortByField('name');

修改了@ my-is-too-short的演示：http://jsfiddle.net/NTez2/39/

Answer 3

@ jylauril的回答非常有帮助，但需要修改演示（自发布以来骨干可能略有变化？）

看起来你需要在排序后触发渲染。

$('#by-s').click(function() {
  c.sortByField('s');
  v.render();
});

更新了@ my-is-too-short的演示：http://jsfiddle.net/NTez2/13/

基于模型属性对骨干集合进行排序

3 个答案: