EmberJS: how to display a template when selecting a change

Question

I am new to ember and trying to figure out how to render a template when a control changes.

CODE:

App.LocationTypeController = Ember.ArrayController.extend({ selectedLocationType: null, locationTypeChanged: function() { //Render template }.observes('selectedLocationType') }); {{view Ember.Select contentBinding="model" selectionBinding="selectedLocationType" optionValuePath="content.id" optionLabelPath="content.name"}} 

When locationType is changed, the locationTypeChanged function runs in the controller. But how can I give some content to the house? (This.render (?)) ...

Answer 1

Yes, you should only use this.render() , but here is the into key.

 App.LocationTypeController = Ember.ArrayController.extend({ selectedLocationType: null, locationTypeChanged: function() { var selectedLocationType = this.get('selectedLocationType'); this.send('changeTemplate',selectedLocationType); }.observes('selectedLocationType') }); 

Take action on your route as

 changeTemplate: function(selection) { this.render('template'+selection.id,{into:'locationType'}); } 

and {{outlet}} {{outlet}} in your locationType template.

 {{view Ember.Select contentBinding="model" selectionBinding="selectedLocationType" optionValuePath="content.id" optionLabelPath="content.name"}} {{outlet}} 

JSBin example for your requirement

Answer 2

If you need to show only the frame when there is something selected, you can use the handle if helper:

In your template

 ... {{#if selectedLocationType}} Any content here will be visible when selectedLocationType has some value {{/if}} ... {{view Ember.Select contentBinding="model" selectionBinding="selectedLocationType" optionValuePath="content.id" optionLabelPath="content.name"}} 

I hope this helps