从子视图向父视图添加新集合

Question

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

我的子视图init函数如下所示：

MATCH

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

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

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

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

然后，子视图只有它需要的东西，仅此而已。它有助于将责任保持在正确的位置。