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();