Switch view template based on model state in Ember.js -

i have notification box in ember.js app change text, styling, , buttons based on value of status model. how switch view (or template) notification box? don't want transitionto because rest of page shouldn't update, notification box.

i have jsfiddle complete example. here's relevant parts glance at:

the main template render notification bar ("statusstate") , regular view data.

<script type="text/x-handlebars" data-template-name="status">   {{render "statusstate" content}}   <p>   other information not related status state, still related status goes here.   </p>   {{outlet}} </script> 

there's separate template each status state ("pending", "ready", "finished"):

<script type="text/x-handlebars" data-template-name="status/pending">   <div style="background-color: grey">     status pending.   </div> </script>  <script type="text/x-handlebars" data-template-name="status/ready">   <div style="background-color: blue">   status ready.   </div> </script>  <script type="text/x-handlebars" data-template-name="status/finished">   <div style="background-color: green">     status finished.   </div> </script> 

the status object nothing special, , belongs statuscontroller:

app.statusroute = ember.route.extend({   model: function() {     return app.status.create();   } });  app.status = ember.object.extend({   value: 0 }); 

my first attempt change templatename of view whenever status' value changes. feels hacky , doesn't seem respond status value changes:

app.statusstateview = ember.view.extend({   templatename: function() {     var templatename = 'status/pending';     var value = this.get('controller.model.value');     if (value === 1) {       templatename = 'status/ready';     }     else if (value === 2) {       templatename = 'status/finished';     }     return templatename;   }.property('controller.model.value') }); 

in short, how change view or template part of page based on model value has more 2 choices?

here's how approach this. add boolean computed properties model or controller , use single template {{#if }} helper. e.g.

app.status = ember.object.extend({   value: 0,   ready: function(){      return this.get('value') === 1;   }.property('value'),   finished: function(){      return this.get('value') === 2;   }.property('value'),   pending: function(){      var value = this.get('value');      return value !== 1 && value !== 2;   }.property('value') }); 

and in single template:

{{#if pending}}   i'm pending {{/if}} {{#if ready}}   i'm ready! {{/if}} {{#if finished}}   i'm finished. {{/if}}