Backbone.js複数のテーブルのデータ操作

Question

私は自分のページに3つのテーブルを持っていて、それらはすべて満たされています。ビューの初期化とバックエンドのREST APIからのデータのフェッチ。データを取得した後、私はpaintと呼ばれるメソッドにリセットをバインドし、そのループ内でコレクション内をバインドしてテーブルを構築します。

paintSelected: function (collection, options) { 
    collection.each(function (ch) { 
     var view = new ChannelViewDetailed({model: ch}); 
     view.setOwner(collection); 
     this.$el.find('#selected tr:eq(' + collection.indexOf(ch) + ')').after(view.render().el); 
    }, this); 
}, 

これは、定義したアンダースコアテンプレートでテーブル全体を構成します。この時点ではすべて問題なく、このページの複数のコレクション間でデータを削除して追加できます。

このテーブルでexclude allまたはinclude allの操作を実行したいとき、ビューの所有者がループしてしまい、リストの中に重複が表示され、順序が失われてしまいます。

ChannelViewDetailed = Backbone.View.extend({ 
    tagName: 'tr', 
    template: _.template($('#tpl-channel-row-detailed').html()), 

    events: { 
     'click td.del': 'deleteSelected' 
    }, 

    setOwner: function (collection) { 
     this.owner = collection; 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    deleteSelected: function (e) { 
     e.preventDefault(); 
     this.owner.remove(this.model); 
     this.remove(); 
    } 
}); 

上で述べたことはすべての項目のアクションごとに実行するときに正常に動作しますが、予想通り、私はバッチを実行するためにwan'tときに機能しないことに注意してください操作（すべてを含める/すべてを除外する）。

これは私が達成しようとしているすべての方法を除外したサンプルです。

excludeAllChannels: function (e) { 
     e.preventDefault(); 
     var self = this; 

     if (!$.isEmptyObject(self.selected)) { 
      _.each(this.selected.models, function (item, index, items) { 
       self.selected.remove(item); 
      }); 
      $('#in-channels tr').has('td').remove(); 
      unsavedState = true; 
     } 
    } 

Answer 1

現在ループしているアレイを変更すると、予期しない結果が生じることがあります。

https://jsfiddle.net/c0xpzq6v/

var a = new Backbone.Collection(data); 
_.each(a.models, function(item) { a.remove(item); }); 

は、以下の

_.each(_.clone(a.models), function(item) { a.remove(item); }); 
a.remove(a.models); 
a.reset();