5

私のアプリには、バックエンドをリッスンし、クライアントブラウザーによって保持されているモデルの更新を取得するsocket.io接続があります（IDによってモデルを取得setし、モデル属性を呼び出します）。

コレクションを並べ替えてから、全体として再レンダリングして、結果としてモデルに新しい順序を反映させたいと思いますset（ほとんどの例は、再レンダリングされた個々のビューに関するもののようです）。これを達成する方法は何ですか？

注意：backbone.jsのレイアウトは、サンプルのtodoアプリからかなり逐語的に削除されています（これは最初のバックボーンアプリです）。

4

1 に答える 1

12

comparatorコレクションのメソッドを提供することで、目的を達成できます。

例：

ModelCollection = Backbone.Collection.extend({
    comparator: function(a, b) {
        if ( a.get("name") > b.get("name") ) return 1;
        if ( a.get("name") < b.get("name") ) return -1;
        if ( a.get("name") === b.get("name") ) return 0;
    },

    initialize: function() {
        this.on('change:name', function() { this.sort() }, this);
    }
});

この例では、コレクションが内部のモデルcomparatorの属性によって昇順で並べ替えられます。name

コレクションのいずれかの属性を変更しても、コレクションは自動的にソートされないことに注意してくださいmodels。デフォルトでは、並べ替えは、新しいモデルを作成してコレクションに追加するときにのみ行われます。ただし、メソッドによって使用されcomparator ますcollection.sort。

change上記のコードは、任意のsのコレクションnameをその属性に単純に再ソートするイベントリスナーを設定することにより、これを利用していますmodels。

全体像を完成させるために、コレクションに関連付けられた適切なイベントリスナーを設定して、View変更があった場合に再レンダリングされるようにします。

CollectionView = Backbone.View.extend({
    initialize: function() {
        this.collection = new ModelCollection();
        this.collection.on('all', function() { this.render() }, this);
    },

    render: function() {
        this.$el.html(this.collection.toJSON());
    }
});

それでおしまい ：）

バックボーンドキュメントからの関連する抜粋：

デフォルトではcomparator、コレクションはありません。を定義するcomparatorと、コレクションをソートされた順序で維持するために使用されます。これは、モデルが追加されると、モデルがの正しいインデックスに挿入されることを意味しますcollection.models。コンパレータは、sortBy（単一の引数を取る関数を渡す）、sort（2つの引数を期待するコンパレータ関数を渡す）、または並べ替える属性を示す文字列として定義できます。[...]後でモデル属性を変更した場合、が付いたコレクションは自動的に再ソートされないため、順序に影響するモデル属性を変更した後comparatorに呼び出すことをお勧めします。sort

于 2012-04-22T07:42:02.803 に答える