ember.js - Ember.js のモデルの状態に基づいてビュー テンプレートを切り替える

Question

Ember.js アプリに、ステータス モデルの値に基づいてテキスト、スタイル、ボタンを変更する通知ボックスがあります。通知ボックスのビュー (またはテンプレート) だけを切り替えるにはどうすればよいですか? ページの残りの部分は更新されるべきではなく、その通知ボックスだけであるため、transitionTo はしたくありません。

完全な例を含むJSFiddle があります。ただし、関連する部分を以下に示します。

メイン テンプレートは、通知バー ("statusState") と通常のビュー データをレンダリングします。

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

各ステータス状態 (「保留中」、「準備完了」、「完了」) ごとに個別のテンプレートがあります。

<script type="text/x-handlebars" data-template-name="status/pending">
  <div style="background-color: grey">
    The status is pending.
  </div>
</script>

<script type="text/x-handlebars" data-template-name="status/ready">
  <div style="background-color: blue">
  The status is ready.
  </div>
</script>

<script type="text/x-handlebars" data-template-name="status/finished">
  <div style="background-color: green">
    The status is finished.
  </div>
</script>

Status オブジェクトは特別なものではなく、StatusController に属します。

App.StatusRoute = Ember.Route.extend({
  model: function() {
    return App.Status.create();
  }
});

App.Status = Ember.Object.extend({
  value: 0
});

私の最初の試みは、ステータスの値が変更されるたびにビューの templateName を変更することでした。しかし、これはハックに感じられ、ステータス値の変更に応答していないようにも見えます:

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')
});

要するに、2 つ以上の選択肢を持つモデル値に基づいて、ページの一部だけのビューまたはテンプレートを変更するにはどうすればよいでしょうか?