Question

I have a form that can filled out on its own or embedded into another form, as part of a larger object. When I {{render}} the form from the containing handlebars template, the child template does not respect the observable on the view.

Parent template:

{{render "EditIntro" introModule embedded=true}}

Where introModule is a property on the containers model which returns a the specific submodel for the intro, which is a part of the parent.

Child View:

App.EditIntroView = Ember.View.extend({
  embedded: false,
  isEmbedded: function() {
    return !!this.get('embedded');
  }.property('embedded'),

  templateName: 'intros/edit_intro',
  // etc.

Child Template (relevant part):

{{! If this form is embedded, user must use the save button for the parent }}
  {{#unless isEmbedded}}
  <button type="submit" class="btn btn-success">
    <span class="glyphicon glyphicon-save"></span>&nbsp;Save
  </button>
  {{/unless}}

I can see the property in the Ember Inspector Chrome plugin, where it is shown to be boolean true. I can set a breakpoint on the isEmbedded function and see that it does not get called when the child template renders, but it does get called when I crack open the Ember Inspector or when I use the Inspector to change the value manually. Finally, if I set the default in the EditIntroView to embedded: true, then the button is hidden like I expect.

So how can I get the child view to respect a simple parameter that has been set from another template's {{render}} call?

Was it helpful?

Solution

The template apparently doesn't have properties which are only defined on the view as part of its context. Since the isEmbedded property is only on the view and not the model or controller, it needs to be prefaced with view.. So the working code fix is as simple as:

{{#unless view.isEmbedded}}

And that's it.

Found the answer in this Ember question about class views vs instance views.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top