EMBER WORKSHOP: Ember.Select change - Load Views

Load a view on Ember.Select change

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
  <script type="text/x-handlebars">
    <h4>Load a view on Ember.Select change?</h4>
      
     <!-- content or contentBinding references the model  -->
     <!-- optionValuePath references the model property -->
     <!-- optionLabelPath references the model property  -->
     <!-- valueBinding references selected which is provided by Ember.Select.  -->
      
    {{view Ember.Select 
        contentBinding="this" 
        optionValuePath="content.template" 
        optionLabelPath="content.name"
        optionPricePath="content.price"
        valueBinding="selected" 
        prompt="Please select a name"
    }}
    {{view Ember.Select  viewName="select"
      content="this"
      optionLabelPath="content.template"
      optionValuePath="content.name"
      prompt="Please select a name"
      
    }}

    <hr/>
    {{view App.EmbeddedView}}
  </script>
  <script type="text/x-handlebars" id="tmpl1">
    Template 1
  </script>
    <script type="text/x-handlebars" id="tmpl2">
    Template 2
  </script>
    <script type="text/x-handlebars" id="tmpl3">
    Template 3
  </script>

JavaScript

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
    return [
      {name: 'tmpl1', template: 'tmpl1',price:'1'},
      {name: 'tmpl2', template: 'tmpl2',price:'2'},
      {name: 'tmpl3', template: 'tmpl3',price:'3'}
    ];
  }
});

App.EmbeddedView = Ember.View.extend({
  templateName: Ember.computed.alias('controller.selected'), // listens for change to selected prop on controller
  templateNameDidChange: function() {
    this.rerender();
  }.observes('templateName') // rerenders the template based on the template value in the data
});