javascript - 检测从集合主干中删除的模型

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 集合中的模型， View 的构建如下，

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

如何从集合中删除模型？ (抱歉会对此发表评论，但没有所需的代表)编辑 -

这是一个冒泡停止的例子，在这个例子中，我有一个城市(集合)，它的模型城市有邻居(集合)，它的模型邻居有人(集合)

从邻居中删除一个人可以被人员集合检测到，但不能再往上，我会稍微更新一下如何在链上触发该事件

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

第二次编辑 -好吧，所以想出了一种方法来获取属于集合一部分的模型属性以传递事件。您只需传入此属性和您想要监听的属性，然后它就会监听该属性以进行删除，如果它也是集合的成员，它将触发该集合的删除事件。然后它也会在属性上触发一个更改事件，以便您知道该模型中的某些内容已更改。删除的原始模型和上下文也可用，就像正常的删除事件一样

但这可能有点过分了。

在笔 View ( (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);