Question

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

我有JSFiddle with a complete example。但这是相关的部分：* / / p>

主模板将呈现通知栏（“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个以上选项的模型值更改部分页面的视图或模板？

Answer 1

在这里，我将如何处理这个问题。将布尔计算属性添加到模型或控制器，并使用带有{{#if}}帮助器的单个模板。 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')
});

在一个模板中：

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

根据Ember.js中的模型状态切换视图模板

1 个答案: