web-dev-qa-db-ja.com

初期化後のバックボーンコレクションのソート

Backbone.jsを使用して、書籍などのアイテムのリストをレンダリングしています。リストがレンダリングされた後、ユーザーがそれらをソートするためのオプションがあります。したがって、ユーザーが[タイトルで並べ替え]または[著者名で並べ替え]をクリックすると、リストはクライアント側で並べ替えられます。

  window.Book = Backbone.Model.extend({
   defaults: {
     title: "This is the title",
     author: "Name here"
   },

Backboneアプリケーションのコンテキストで使用して、この種類を達成するための最良の方法は何ですか。 AppViewでjQuery domソーターを使用しますか？

backbone.js
52
Jhony Fung

このトピックに関するディスカッションをご覧ください。 https://github.com/documentcloud/backbone/issues/41 。

要するに、ユーザーが「Xで並べ替え」を選択すると、次のことができます。

  1. コレクションにcomparator関数を設定します
  2. コレクションのsort関数を呼び出します（sortイベントをトリガーします）
  3. ビューでsortイベントをリッスンし、アイテムを（クリアして）再描画します

ステップ1と2を処理する別の方法は、コレクションのsortByメソッドを呼び出して、ビューがリッスンできるカスタムイベントをトリガーする独自のメソッドを用意することです。

ただし、ビューの並べ替えとコレクションの並べ替え順序との同期を保つには、クリアと再描画が最も簡単な（そしておそらく最速の）方法であるようです。

50
satchmorun

コンパレーター関数を更新してから、sortメソッドを呼び出すことができます。

// update comparator function
collection.comparator = function(model) {
    return model.get('name');
}

// call the sort method
collection.sort();

ビューは自動的に再レン​​ダリングされます。

48
jpanganiban

comparatorは必要なものです

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    comparator: function(item) {
        return item.get('pid');
    }
});
12
Nick Vanderbilt

この方法はうまく機能し、すべてのattributesによる動的なソートを可能にし、ascendingまたはdescendingを処理します。

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    sortByField: function(field, direction){
            sorted = _.sortBy(this.models, function(model){
                return model.get(field);
            });

            if(direction === 'descending'){
                sorted = sorted.reverse()
            }

            this.models = sorted;
    }
});
3
Loourr