EmberJS: How to render a template on select change

Question

I'm new to ember and am trying to figure out how to render a template when a select 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 the locationType changes the locationTypeChanged function is fired in the controller. But how do I render some content into the dom from there? (this.render()?)...

Answer 1

Yes you have to use this.render() only, but the key here is into option inside it.

App.LocationTypeController = Ember.ArrayController.extend({

 selectedLocationType: null,

 locationTypeChanged: function() {
    var selectedLocationType = this.get('selectedLocationType');
    this.send('changeTemplate',selectedLocationType);
 }.observes('selectedLocationType')
});

Have the action in your route as

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

and have an {{outlet}} in your locationType's template.

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

{{outlet}}

Sample JSBin for your requirement

Answer 2

If you need to show only a frament, when exist something selected, you can use the if handlebars 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 it helps