モデルチェンジ時にUIを更新するプロセスができません

Question

私はモデルのコレクションを持っています。モデルが変更されると、コレクションの変更イベントがトリガーされます。私はコレクションの変更イベントを監視し、UIを更新します。

UIを更新するにはどうすればよいですか？私はどのモデルが新しいのかを知る必要がないので、追加することができます。既存のものは更新できますか？

私はこの細かさが必要だと感じている理由の1つは、アニメーションの遷移があるためです。そのため、すべてのモデルを以前の状態に関連付ける必要があります。バックボーンはこれを手助けするのですか、それとも私自身でこれを構築すべきですか？

Answer 1

どのモデルが新しいかを知るには、コレクションの「追加」イベントを聞きます。個々のアイテムをレンダリングすることができます。この例では

MyView = Backbone.View.extend({ 

    initialize: function(){ 
    _.bindAll(this, "renderItem"); 
    this.collection.bind("add", this.renderItem); 
    }, 

    renderItem: function(item){ 
    // render the new item here 
    }, 

    render: function(){ 
    this.collection.each(this.renderItem); 
    } 
}); 

は、コレクションをレンダリングすることは、個々のアイテムのレンダリングと同じように動作します - それは同じのRenderItem方法「追加」イベントコールを呼び出します。

ソートされたリストを持つシナリオを処理するには...アイテムの位置を把握するためにrenderItemメソッドでいくつかのロジックを実行する必要があります。この多分（未テストコード...ちょうどアイデア）のようなもの：

MyView = Backbone.View.extend({ 

    initialize: function(){ 
    _.bindAll(this, "renderItem"); 
    this.collection.bind("add", this.renderItem); 
    }, 

    renderItem: function(item){ 
    var itemView = new ItemView({model: item}); 
    itemView.render(); 
    return itemView; 
    }, 

    render: function(){ 
    this.collection.each(function(item){ 
     var itemView = renderItem(item); 
     var itemIndex = item.get("index"); 
     var previousItem = this.$(".myList")[itemIndex]; 
     $(itemView.el).insertAfter($(previousItem)); 
    }); 
    } 
}); 

このコードを使用すると、モデルがですることになっていることを順序を知るためにあなたのモデルのindex属性を持っていると仮定し

。私はそれをテストしていないので、このコードがそのまま実行されない可能性が高いことにも注意してください。しかし、それはあなたが書くことを望むコードのアイデアを与える必要があります。

Answer 2

モデルが変更された場合、コレクションを通過する必要はありません。各モデルのサブビューをシンプルにレンダリングし、changeイベントを処理できます。

Collection: Tasks 
Model:  Task 

そして、二つのビュー：

あなたは次のような構造を持っている想像したタスクの#render方法で

Tasks view (main view) 
Task view (sub view) 

あなたは、例えばレンダリング表示あなたの仕事（サブビュー）を保持する要素<ul>。次に、すべてのコレクションのモデルを繰り返し、それぞれのタスクビューを作成し、モデルを渡してelをメインビュー<ul>に追加します。 タスクビュー内で#renderメソッドをモデルchangeイベントにバインドし、各タスクビューが自動的に処理します。 - 私は意味がありますか？