Adding a model to a parent view from a child view

Question

I'm trying to add a new model to my parent view from a child view.

In my parent view, I render the child view like this:

    renderEngineOptions: function () {
        var view = new EngineOptionsView({ model: this.model });
        this.$('.engineOptions').append(view.render().el);
    },

In my child view(engineOptionsView), I define the parent as 'this.engine' in the initialize method:

    initialize: function (args) {
        this.engine = args.model;
    }

Then I have an html button, that when clicked, fires this event:

    addTurbo: function() {
        this.$('.turboOption').show();
        this.engine.turbo = new Turbo();
    }

Turbo is a new model that I'm trying to add to the engine. But nothing happens. I get no error in the console, but when I write out the engine model in the console, no turbo was ever added.

How can I add the turbo model to the parent, from the child?

Thanks!

Answer 1

When you pass a model with the model option, the view automatically apply it to itself, so it's available through this.model directly.

var view = new EngineOptionsView({ model: this.model });

in the child:

initialize: function (args) {
    this.engine = args.model; // not necessary
    console.log(this.model === this.engine); // same thing
}

You are adding the turbo as a property of the model

this.engine.turbo = new Turbo();

So if you want to get the turbo from the parent:

this.model.turbo;

If you want to add the turbo as an attribute of the model from the child view:

this.model.set('turbo', new Turbo());

And to get it from the parent:

this.model.get('turbo);

Without more details, it's hard to guess where the problem is coming from.