12

テーブルにレンダリングされるバックボーンコレクションがあります。「task_status」、「task_group」など、コレクションが持つ特定の属性に基づいてテーブルを並べ替え可能にしたいと思います。collection.comparator、ndcollection.sortに関するバックボーンドキュメントを読んでいます。どうすればこれを行うことができますか？

4

3 に答える 3

31

このcomparator関数は、コレクション内の2つのモデルを比較するために使用され、必要に応じて（一貫した）方法でそれらを比較できます。特に、使用するモデル属性を選択できるため、コレクションに次のようなものを含めることができます。

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

古いバックボーンでは、呼び出し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/

于 2012-07-16T19:14:50.327 に答える
20

@ mu-is-too-shortの答えは良いですが、フィールド値を比較する簡単な方法があります。

フィールドに基づいてコレクションを並べ替える最も簡単な方法は、並べ替える正確なフィールドの値を返すコンパレータ関数を提供することです。この種のコンパレータにより、BackboneはのsortBy代わりに関数を呼び出します。これにより、Backbonesortはそれ自体で複雑な比較を行い、ロジックについて心配する必要はありません。

したがって、本質的には、順序を決定するためのより高度なニーズがない限り、複雑なコンパレータ機能を提供する必要はありません。

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/

于 2012-07-17T12:22:43.313 に答える
3

@jylaurilの回答は非常に役立ちますが、デモを変更する必要がありました（投稿されてからバックボーンがわずかに変更された可能性がありますか？）

並べ替えた後、レンダリングをトリガーする必要があるようです。

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

@ my-is-too-shortのデモを更新しました：http：//jsfiddle.net/NTez2/13/

于 2013-03-28T18:03:03.717 に答える