2012-07-16 18 views
11

私はテーブルにレンダリングされるバックボーンコレクションを持っています。私はテーブルが "task_status"、 "task_group"のような特定の属性に基づいてソート可能にしたいと思います。私はcollection.comparator、nd collection.sortに関するバックボーンのドキュメントを読んでいます。 これをどのように行うことができますか?モデル属性に基づくバックボーンコレクションのソート

答えて

29

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/

+0

私はソートフィールドが文字列 – MrFoh

+0

@MrFohている状況でこのパターンを使用することができます。私の-で余りに短いのデモ@更新

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

文字列では、デモの 's'属性は文字列です。 –

+1

Backboneはソート時にresetイベントを発生させないため、この例はもう機能しません。ソートイベントが発生します。 –

20

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

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

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

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 -functionを呼び出すことができます。たとえば は:

collection.sortByField('name'); 

のデモ-余りに短いです私@更新:jylaurilの答えは途方もなく出て助け@http://jsfiddle.net/NTez2/39/

+1

この例は、バックボーンがソート時にresetイベントを発生させないため、動作しなくなります。ソートイベントが発生します。 –

+1

ヘッドアップありがとう!私はその変更に対応するようにサンプルを更新しました:http://jsfiddle.net/NTez2/39/ – jylauril

+1

単一引数コンパレータ(と '_.sortBy')の大きな問題は、昇順と降順の間で切り替えることができないことです任意の正常な方法で文字列に。数字の降順は簡単ですが、文字列を否定することは簡単ではありません。また、複数のキーを1つの文字列にマッシュすることなく並べ替えることはできません。 –

3

、それが投稿されましたので、デモ(バックボーンでおそらくわずかな変化を修正するために必要な?)

ソート後にレンダリングをトリガーする必要があるようです。はい、 `>`と `<`作業:http://jsfiddle.net/NTez2/13/

関連する問題