Ember.js 中基于模型状态切换视图模板

Question

我的 Ember.js 应用程序中有一个通知框，它将根据状态模型的值更改文本、样式和按钮。 如何只切换通知框的视图（或模板）？我不想转换到，因为页面的其余部分不应该更新，只是通知框。

我有一个JSFiddle with a complete example。但这里有一些相关的部分可以看一下：

主模板将呈现通知栏（“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
});

我的第一次尝试是在状态值更改时更改视图的模板名称。但这感觉很老套，甚至似乎都没有响应状态值的变化：

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 个选项的模型值仅更改部分页面的视图或模板？

Answer 1

以下是我的处理方法。将布尔计算属性添加到模型或控制器，并使用带有 {{#if }} 帮助器的单个模板。例如

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

在一个模板中：

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