检测从集合骨干中删除的模型

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