Javascript 根据模型属性对骨干集合进行排序

sort backbone collection based on model attributes

提问by MrFoh

I have a backbone collection which is rendered in a table. I would like to make the table sortable based on certain attributes the collection has, like "task_status","task_group". I've being reading the backbone documentation about collection.comparator,nd collection.sort. How can I get this done?

我有一个在表格中呈现的主干集合。我想让表格根据集合具有的某些属性进行排序，例如“task_status”、“task_group”。我正在阅读有关 collection.comparator 和 collection.sort 的主干文档。我怎样才能做到这一点？

回答by mu is too short

The comparatorfunction is used to compare two models in the collection and it can compare them in any (consistent) way that it wants to. In particular, it can choose which model attribute to use so you could have something like this in your collection:

该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;
}    

and then you just need some methods on the collection to change the sort_keyand call sort:

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

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

In older Backbones, calling sortwill trigger a "reset"event whereas newer versions will trigger a "sort"event. To cover both cases you can listen to both events and re-render:

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

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

Demo: http://jsfiddle.net/ambiguous/7y9CC/

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

You can also use listenToinstead of onto help you avoid zombies:

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

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

Demo: http://jsfiddle.net/ambiguous/nG6EJ/

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

回答by jylauril

@mu-is-too-short's answer is good, except there's an easier way to compare the field values:

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

The easiest way to sort the collection based on a field, is to provide a comparator function that returns the exact field's value you want to sort by. This kind of comparator causes Backbone to call sortByfunction, instead of sort, which then does that complex comparison on it's own and you don't have to worry about the logic.

根据字段对集合进行排序的最简单方法是提供一个比较器函数，该函数返回要作为排序依据的确切字段值。这种比较器导致 Backbone 调用sortByfunction 而不是sort，然后它自己进行复杂的比较，您不必担心逻辑。

So in essence, you don't have to provide a complex comparator function, unless you have a more advanced need for determining the order.

所以本质上，你不必提供复杂的比较器函数，除非你有更高级的确定顺序的需求。

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();
    }
});

After this you can just call the collection's sortByField-function with a string that represents the key that you want to sort by. For example:

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

collection.sortByField('name');

Modified @my-is-too-short's demo: http://jsfiddle.net/NTez2/39/

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

回答by Erik

@jylauril's answer helps out tremendously, but needed to modify the demo (perhaps slight changes in backbone since it was posted?)

@jylauril 的回答有很大帮助，但需要修改演示（也许自发布以来主干略有变化？）

Looks like you need to trigger a render after you've sorted.

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

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

Updated @my-is-too-short's demo: http://jsfiddle.net/NTez2/13/

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