5

リストでアクセスできるはずのいくつかのアイテムを含むコレクションがあります。

したがって、コレクション内のすべての要素は独自のビュー要素を取得し、それがDOMに1つのコンテナーに追加されます。

私の質問は、コンパレータ関数を使用してコレクションで達成した並べ替え順序をDOMに適用するにはどうすればよいですか？最初のレンダリングは簡単です。コレクションを反復処理してすべてのビューを作成し、それを正しい順序でコンテナ要素に追加します。

しかし、モデルが変更され、コレクションによって並べ替えられた場合はどうなりますか？要素が追加された場合はどうなりますか？すべての要素を再レンダリングするのではなく、必要なDOMノードのみを更新/移動します。

4

2 に答える 2

7

モデル追加

indexモデルがコレクションに追加されるときにオプションで取得されるため、要素が追加されるパスはかなり単純です。このインデックスはソートされたインデックスです。単純なビューがある場合、特定のインデックスにビューを簡単に挿入できるはずです。

ソート属性の変更

これは少しトリッキーで、答えが手元にありません (私も時々これに苦労しました)最初に追加しました。

バックボーンのドキュメントから:

後でモデル属性を変更しても、コンパレータ関数を含むコレクションは自動的に再ソートされないため、順序に影響するモデル属性を変更した後に sort を呼び出したい場合があります。

そのため、コレクションで sort を呼び出すとreset、リスト全体の再描画をトリガーするためにフックできるイベントがトリガーされます。

かなり長いリストを扱う場合は非常に効果がなく、ユーザー エクスペリエンスが大幅に低下したり、ハングアップしたりする可能性があります。

したがって、これを回避できるいくつかのことは、次のことができることを知ることです。

  • を呼び出してソートした後、常にモデルのインデックスを見つけるcollection.indexOf(model)
  • イベントからモデルのインデックスを取得しますadd(第 3 引数)

編集：

ちょっと考えてみたらこんな感じになりました。

var Model = Backbone.Model.extend({
    initialize: function () {
        this.bind('change:name', this.onChangeName, this);
    },
    onChangeName: function ()
    {
        var index, newIndex;

        index = this.collection.indexOf(this);
        this.collection.sort({silent: true});
        newIndex = this.collection.indexOf(this);
        if (index !== newIndex)
        {
            this.trigger('reindex', newIndex);
            // or
            // this.collection.trigger('reindex', this, newIndex);

        }
    }
});

そして、あなたの見解では、あなたは聞くことができます

var View = Backbone.View.extend({
    initialize: function () {
        this.model.bind('reindex', this.onReindex, this);
    },
    onReindex: function (newIndex)
    {
        // execute some code that puts the view in the right place ilke
        $("ul li").eq(newIndex).after(this.$el);
    }
});
于 2012-05-17T17:10:15.080 に答える