檢測從集合骨幹中刪除的模型

Question

我目前正在研究骨幹應用程序，並且已經打了一下牆。我有收集看起來像這樣，

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 

在以上我另一個集合稱爲item_files模型這集看起來像這樣，

_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

你如何從集合中刪除模型？ （抱歉，就會說：這一點，但所需的代表沒有） 編輯 -

這裏的冒泡停止其中一個例子，在這個例子中，我有一個城市（集合）誰是示範城市有社區（集合）誰的模型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編輯 - 好吧，所以想出了一種方法來獲取propert作爲集合的一部分的模型將事件向上傳遞。所有你在這裏做的傳遞和你想要聽的屬性，然後它會聽取該屬性的刪除，如果它也是一個集合的成員，它將激發集合的刪除事件。然後，它還會在屬性上產生更改事件，因此您知道該模型中的某些內容已更改。原來的模型刪除和上下文也可用，就像他們將與一個正常的刪除事件

雖然這可能是矯枉過正。

在筆視圖（(pen version of code)）上查看控制檯，您將看到人員移除事件已經通過鏈條。你可以刪除我剛傳入的logMessage參數，以便你可以看到它在控制檯中工作。

添加的功能_bubbleEventToCollection

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