Backbone:侦听在集合中的模型内添加/删除集合的事件。

时间:2015-03-29 10:12:29

标签: javascript backbone.js

我有一个模型x的集合y(一个实例)。

var y = Backbone.Model.extend({
        defaults: {
            name: null,
            otherCollection: null
        }
    });

otherCollection(多个实例)是模型z的集合。

我会在集合x内收听哪个事件,以便在z添加/删除任何otherCollection时收到通知?

2 个答案:

答案 0 :(得分:4)

默认情况下,Backbone仅支持来自Contained Model的事件传播 - > Containing Collection。它不会做任何你需要额外努力的深层嵌套事件传播。

Contained Collection - >执行此操作Containing Model,您可以执行以下操作。在这里,我们要设置一个EpisodeCollection,它将包含在SeriesModel中。每当剧集收集发生变化时,我们都希望在系列中听到它:

var EpisodeCollection = Backbone.Collection.extend({
    comparator: 'id'
    // ... whatever you want
});

var SeriesModel = Backbone.Model.extend({
    initialize: function() {
        if (this.has('episodes')) {
            this.listenTo(this.get('episodes'), 'all', this._onEpisodeChange);
        }
    },

    _onEpisodeChange: function() {
        var eventArgs = Array.prototype.slice.call(arguments, 1);
        var eventName = arguments[0];

        var toTrigger = 'change:episodes:' + eventName + ' change:episodes change';
        this.trigger(toTrigger, eventArgs);
    }    
});

这是一个正在运行的JSFiddle,用一个光荣的星球大战示例说明了这一点:

http://jsfiddle.net/9kn6uqdn/4/

您可以想象根据需要构建类似的连接以进行更深层次的嵌套。

关于Backbone的一个好处是,它不是一个固定的框架;它将意见留给应用程序实现者(我们!)。为此,我尝试在几个不同的场合进行深度嵌套的事件传播,并且每次都朝着另一个方向发展。即使在上面的简单示例中,您也可以看到修改第6集的title实际上会触发6个不同的事件(这可能不是您所期望的)。

您可以通过更多的努力来改善这一点,但它可能会非常快速地变得非常复杂。大型应用中的事件传播很难推理,因此在我看来,事件流越简单,管理和管理就越容易。维护。

答案 1 :(得分:1)

var ModelY = Backbone.Model.extend({});

var ModelZ = Backbone.Model.extend({});

var CollectionX = Backbone.Collection.extend({
    model : ModelY,
    initialize:function(){
    this.listenTo(otherCollection,'add',function(){
            alert('model added to otherCollection');
        });
    }
});

var OtherCollection = Backbone.Collection.extend({ model : ModelZ });


var otherCollection = new OtherCollection();

var collectionX = new CollectionX();

otherCollection.add(new ModelZ());

http://jsfiddle.net/eedfhm7f/

参考文献:http://backbonejs.org/#Events-listenTo