Add new collection to parent view from child view

Question

I have a parent view (which is for car engines) that contains a child view which displays a list of options. One of the options is to add a new collection to the parent view.

My child view init function looks like this:

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

Then I have this method that adds the collection(valves) when a button is pressed:

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

So now that I created the new collection, how do I add it to the parent?

Answer 1

There are multiple ways to achieve that.

Passing the parent object down the hierarchy

Like you're already doing, you could call a function from the parent object to pass the new collection.

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

Triggering events

One way to avoid strong coupling is to trigger events from the child view, to which the parent is listening.

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

Then, the child view only has what it needs and nothing more. It help to keep responsibilities at the right place.