从子视图将新集合添加到父视图

Question

我有一个父视图（用于汽车引擎），其中包含一个显示选项列表的子视图。其中一个选项是将新集合添加到父视图。

我的子视图初始化函数如下所示：

initialize: function (engine) {
    this.engine = engine; //parent object
    this.valves = engine.valves; //may or may not be empty
};

然后我有这个方法可以在按下按钮时添加集合（阀门）：

addPerformanceValves: function() {
    var self = this;
    if (this.valves.lentgh == 0) {
        this.valves = new ValveCollection();
        this.valves.url = function() {
            return '/api/engines/auto/performance/parts/' + self.id + '/valves';
        }
    }
    this.$('.performanceParts').show();
}

现在我创建了新集合，如何将它添加到父集合？

Answer 1

有多种方法可以实现。

将父对象向下传递

就像你已经在做的那样，你可以从父对象调用一个函数来传递新的集合。

var Child = Backbone.View.extend({
    initialize: function(options) {
        options = options || {};
        this.engine = options.engine; //parent object
        this.valves = engine.valves; //may or may not be empty
    },
    addPerformanceValves: function() {
        var self = this;
        if (this.valves.lentgh == 0) {
            this.valves = new ValveCollection();
            this.valves.url = function() {
                return '/api/engines/auto/performance/parts/' + self.id + '/valves';
            }

            // call the parent
            this.engine.addNewCollection(this.valves);
        }
        this.$('.performanceParts').show();
    }
});

var Parent = Backbone.View.extend({
    addNewCollection: function(collection) {
        // do what you want with the collection
        this.newCollection = collection;
    }
});

触发事件

避免强耦合的一种方法是从子视图触发事件，父视图正在监听。

var Child = Backbone.View.extend({
    initialize: function(options) {
        options = options || {};
        this.valves = options.valves; //may or may not be empty
    },
    addPerformanceValves: function() {
        var self = this;
        if (this.valves.lentgh == 0) {
            this.valves = new ValveCollection();
            this.valves.url = function() {
                return '/api/engines/auto/performance/parts/' + self.id + '/valves';
            }

            // call the parent
            this.trigger('child:collection', this.valves);
        }
        this.$('.performanceParts').show();
    }
});

var Parent = Backbone.View.extend({
    initialize: function() {
        this.child = new Child({ valves: this.valves });

        // listen to child view events
        this.listenTo(this.child, 'child:collection', this.addNewCollection);
    },
    addNewCollection: function(collection) {
        // do what you want with the collection
        this.newCollection = collection;
    }
});

然后，子视图只有它需要的东西，仅此而已。这有助于将责任放在正确的地方。