컬렉션 백본에서 모델 삭제 중임 감지

Question

현재 백본 앱으로 작업 중이며 벽이 약간 있습니다. 나는 다른 모음이라고 item_files I 위의 모델 내에서 다음과 같습니다 수집,

r {length: 3, models: Array[3], _byId: Object, constructor: function, model: function…} 
_byId: Object 
_events: Object 
_listenerId: "l40" 
length: 3 
models: Array[3] 
__proto__: s 

당신이 컬렉션 3 개 모델을 가지고 볼 수 있으며, 모델의 예는 다음과 같습니다로서,

0: r 
_changing: false 
_events: Object 
_pending: false 
_previousAttributes: Object 
attributes: Object 
complete: false 
completed_by: "0" 
completed_by_name: null 
end_date: false 
files: r 
id: "7693" 
is_owner: false 
item_active_task_count: 0 
item_description: "sdsadasdasd" 
item_files: r 
item_id: "7693" 
item_name: "First Item (1)" 
item_tasks: r 
item_type: null 
numFile: 8 
parent_id: null 
progress: "0" 
subItems: r 
sub_items: Array[2] 
tasks: r 
__proto__: Object 
changed: Object 
cid: "c3" 
collection: r 
counter: 5 
id: "7693" 
__proto__: s 

이 이 컬렉션은, 다음과 같이

_byId: Object 
length: 8 
models: Array[8] 
0: r 
1: r 
2: r 
3: r 
4: r 
5: r 
6: r 
7: r 
length: 8 
__proto__: Array[0] 
__proto__: s 

을보고이 컬렉션에서 모델은 다음과 같습니다

내가 지금 뭐하는 거지 일부 삭제 기능에 노력하고 무엇

models: Array[8] 
0: r 
_changing: false 
_events: Object 
_listenerId: "l48" 
_pending: false 
_previousAttributes: Object 
attributes: Object 
creator: "Me" 
creator_id: "14" 
download_url: "http://test.dev/projects/download/696d6167655f31322e4a5047/698/14" 
file_created: "2014-06-12 00:00:00" 
file_hex: "696d6167655f31322e4a5047" 
file_parent_id: "7694" 
file_parent_type_id: "7694" 
id: "9011" 
is_owner: 1 
last_modified: "2014-06-12 00:00:00" 
panel_name: "image_12.JPG" 
project_id: "698" 
size: "1.76 MB" 
thumb_url: null 
timeago: "a day ago" 
user_type: "" 
viewer_url: "http://test.dev/projects/viewer/698/696d6167655f31322e4a5047" 
__proto__: Object 
changed: Object 
cid: "c12" 
collection: r 
id: "9011" 
__proto__: s 

, 나는 용기를 구축하는 기능을 가지고, 다음 item_files 컬렉션에서 모델을 나열 뷰는 다음과 같이 구축 얻을

addItems: function() { 

    this.model.get('items').each(this.loadItem, this); 

    //bind the expander 
    $('.expander').unbind('click').click($.initExpanders.expander); 


}, 

loadItem: function(item) { 

    if(item.get("item_parent_id") == undefined) { 
     var item_parent_id = item.get("item_id"); 
    } 

    //item.set({"numFile" : item.get('item_files').length}); 

    var itemView = new app.ItemView({ 
     model: item, 
     collection:item.get('item_files') 
    }); 

    this.$el.find('.wrapper').append(itemView.render(item).el); 
    if(item.get("subItems") !== undefined) { 
     if(item.get("subItems").length > 0) { 
      if(item.get("subItems").length == 1) { 
       this.$el.find(itemView.el).find('.sub-item-count').text(item.get("sub_items").length + " Sub Item"); 
      } else { 
       this.$el.find(itemView.el).find('.sub-item-count').text(item.get("sub_items").length + " Sub Items"); 
      } 
     }  
    } 

    //itemView.addFilesWrapper(item); 
    //itemView.addFiles(); 

    var itemFilesFilter = new app.FilesFilter({ 
     collection: item.get('item_files'), 
     model: item 
    }); 

    this.$el.find('article[data-item-id='+item.get('id')+'] .tab-content.files:first').html(itemFilesFilter.render().el); 

    var that = this; 
    item.get('files').each(function(file){ 
     var itemFileListItem = new app.FileListItem({ 
      model: file, 
      collection: item.get('item_files'), 
     }); 
     //console.log(that.$el.find('article[data-item-id='+item.get('id')+'] .tab-content').append(itemFileListItem.render().el)); 

     that.$el.find('article:first[data-item-id='+item.get('id')+'] .image-grid:first').append(itemFileListItem.render().el); 
    }); 

}, 

위의 항목 컬렉션에서 모델을 나열하고, 변경 사항에 대한 항목 컬렉션을 청취 한 다음 변경 사항이 추가 및 삭제로 구성되어 있으므로 필요한 모든 기능을 실행할 수 있다고 생각했습니다.

그러나 컬렉션에서 모델을 제거하면 변경 이벤트가 문제를 유발하지 않는 것 같습니다.

Answer 1

컬렉션에서 모델을 어떻게 삭제 하시겠습니까? (미안하지만 의견을 말할 수는 있지만 담당자가 필요하지는 않습니다.) EDIT -

여기는 버블 링이 멈추는 곳의 예입니다.이 예에서는 모델 도시에 이웃 (컬렉션)이있는 도시 (컬렉션)가 있습니다. 모델 neighbourhod 사람들에게 사람들이 수집에 의해 감지하지만 이벤트가 체인

var NeighbourHoodModel = Backbone.Model.extend({ 
    defaults:{ 
    name: null, 
    people:null 
    } 
}); 
var PeopleModel= Backbone.Model.extend({ 
    defaults:{ 
    name: null 
    } 
}); 
var CityModel = Backbone.Model.extend({ 
    defaults:{ 
    neighbourhoods:null 
    } 
}); 
var NeighborhoodsCollection = Backbone.Collection.extend({ 
    model: NeighbourHoodModel 
}); 
var PeopleCollection = Backbone.Collection.extend({ 
    model: PeopleModel 
}); 
var CityCollection = Backbone.Collection.extend({ 
    model: CityModel 
}) 


var cities = new CityCollection([ 
    { id:1, neighbourhoods: new NeighborhoodsCollection([ 
     { id:1,name: "neighbourhood-1", 
     people: new PeopleCollection([ 
      { id:1,name: "jim"}, 
      { id:2,name: "fred"} 
     ]) 
     } 

    ]), 
    } 
]); 

(function(cities){ 


    cities.forEach(function(city){ 
    city.get("neighbourhoods").get(1).get("people").on("remove", function(){ 


    console.log("person removed") 
    }); 
    city.get("neighbourhoods").get(1).on("remove", function(){ 
    console.log("person removed from neighbourhood") 
    }); 

    city.get("neighbourhoods").on("remove", function(){ 
    console.log("person removed from neighbourhoods") 
    }); 
    city.get("neighbourhoods").get(1).get("people").remove(1); 


}); 

})(cities); 

에게 해고 할 수있는 방법에 약간의되지 않은 최대 더 아픈 갱신이 될 수있는 이웃에서 사람을 제거 (컬렉션)

있다

2ND EDIT - 그래서 재산을 얻는 방법이 생겼습니다. 이벤트를 전달할 컬렉션의 일부인 모델의 컬렉션입니다. 당신이 듣고 자하는 속성과 속성에 대한 패스를 모두 수행하면 컬렉션의 멤버 인 경우 콜렉션에 대한 remove 이벤트를 발생시키는 remove에 대한 해당 속성을 수신합니다. 그런 다음 속성에 대한 변경 이벤트도 전 fir 할 것이므로 해당 모델의 내용이 변경되었음을 알 수 있습니다. 제거 된 원래 모델과 컨텍스트는 정상적인 제거 이벤트와 마찬가지로 사용할 수 있습니다.

이것은 과도 할 수 있습니다.

펜보기 ((pen version of code))에서 콘솔을 보면 사람 제거 이벤트가 체인 위로 전달 된 것을 볼 수 있습니다. 방금 전달한 logMessage 인수를 제거하여 콘솔에서 작동하는 것을 볼 수 있습니다.

I 백본 함수 인 .remove()를 사용하고

Backbone.Model.prototype.bubbleEventToCollection = function(caller, model, logMessage){ 
      this.listenTo(model, "remove", function(model, that, options) { 
       console.log(logMessage, model); 
       if (this.collection instanceof Backbone.Collection) { 
        this.collection.trigger("remove", model, that, options); 
       } 
       this.trigger("change", model, that, options); 
      }, caller); 
    }; 
    var PeopleModel = Backbone.Model.extend({ 
     defaults: { 
      name: null 
     }, 
     initialize: function() { 
      this.on("remove", function(model) { 
       console.log("person removed", model) 
      }, this); 
     } 
    }); 
    var NeighbourHoodModel = Backbone.Model.extend({ 
     defaults: { 
      name: null, 
      people: null 
     }, 
     initialize: function() { 
      this.bubbleEventToCollection(this, this.attributes.people, "person removed from neighbourhood"); 
     } 
    }); 
    var CityModel = Backbone.Model.extend({ 
     defaults: { 
      neighbourhoods: null 
     }, 
     initialize: function() { 
       this.bubbleEventToCollection(this, this.attributes.neighbourhoods, "person removed from city"); 
     } 
    }); 


    /** 
    * 
    * Collections 
    */ 
    var NeighborhoodsCollection = Backbone.Collection.extend({ 
     model: NeighbourHoodModel, 
     initialize: function() { 
      this.on("remove", function(model) { 
       console.log("person removed from neighbourhoods", model) 
      }, this); 
     } 

    }); 
    var PeopleCollection = Backbone.Collection.extend({ 
     model: PeopleModel, 
     initialize: function() { 
      this.on("remove", function(model) { 
       console.log("person removed from people", model) 
      }, this); 
     } 

    }); 
    var CityCollection = Backbone.Collection.extend({ 
     model: CityModel, 
     initialize: function() { 
      this.on("remove", function(model) { 
       console.log("person removed from cities", model) 
      }, this); 
     } 
    }) 


    var cities = new CityCollection([{ 
     id: 1, 
     neighbourhoods: new NeighborhoodsCollection([{ 
       id: 1, 
       name: "neighbourhood-1", 
       people: new PeopleCollection(
        [{ 
         id: 1, 
         name: "jim" 
        }, { 
         id: 2, 
         name: "fred" 
        }]) 
      } 

     ]), 
    }]); 

    (function(cities) { 
     cities.get(1).get("neighbourhoods").get(1).get("people").remove(1); 
    })(cities);