javascript - Backbone : listen to add/remove event of a collection inside model in a collection.

Question

我有一组 x(一个实例)模型 y。

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

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

我在集合 x 中监听哪个事件，以便在 otherCollection 中添加/删除任何 z 时收到通知？

Answer 1

默认情况下，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 个不同的事件(这可能不是您所期望的)。

您可以付出更多的努力来改进它，但它会很快变得非常复杂。大型应用程序中的事件传播可能很难推理，因此在我看来，事件流越简单，管理和维护就越容易。