Question

我正在尝试将<tr>的类设置为#warning或#success，具体取决于我的服务器模型的percentFree属性。这是我的Handlebar模板：

<script type="text/x-handlebars" data-template-name="dashboard">

<h1>Virtual Image Overview</h1>

<table class="table table-hover">
    <thead>
        <tr>
            <th>Machine Name</th>
            <th>Drive</th>
            <th>Total Size</th>
            <th>Used Space</th>
            <th>% free</th>
        </tr>
    </thead>
    <tbody>
      {{#each controller}}
        <tr {{bindAttr class="status"}}>
          <td>{{name}}</td>
          <td>{{drive}}</td>
          <td>{{totalSize}}</td>
          <td>{{usedSpace}}</td>
          <td>{{percentFree}}</td>
        </tr>
      {{/each}}
    </tbody>
</table>
</script>

这是我的模特：

Dashboard.Server = DS.Model.extend({
  name: DS.attr('string'),
  drive: DS.attr('string'),
  totalSize: DS.attr('number'),
  usedSpace: DS.attr('number'),
  percentFree: DS.attr('number'),
  status: "",
  setStatus: function() {
    if(this.percentFree <= 0.50) {
      this.status = "warning";
    } else {
      this.status = "success";
    }
  }
});

虽然<tr>的类实际上从未更新过。是否有更有效（正确）的方法来解决这个问题？

我也试过status: this.setStatus()和

setStatus: function() {
  if(this.percentFree <= 0.50) {
    return "warning";
  } else {
    return "success";
  } 
}

没有运气

Answer 1

这是在itemController视图中为每个子视图使用{{each}}的好地方。

将{{each}}帮助器更改为包含值itemController的{{1}}属性。

server

这将告诉Ember为集合中的每个服务器创建{{#each controller itemController="server"}}的实例。服务器模型将成为每个项目控制器的App.ServerController属性。然后你像这样实现content：

App.ServerController

我们扩展App.ServerController = Ember.ObjectController.extend({ status: function() { if(this.get('percentFree') <= 0.50) { return "warning"; } else { return "success"; } }.property('percentFree') });，以便控制器代理模型对象的所有属性。我们将Ember.ObjectController实现为依赖于status的计算属性。

同时从模型中删除有关状态的所有内容。

详细了解Ember.js API Docs中的percentFree助手。

Answer 2

由于您只有两个值，我会执行以下操作：

<tr {{bindAttr class="percent_status:warning:success"}} >

在你的模特中：

  percent_status: function() {
    return this.percentFree <= 0.50 ? true : false;
  }.property('percentFree')

您可以绑定到属性值：

<tr {{bindAttr class="percent_status"}} >

一旦视图中的内容开始变得更加复杂，并且您需要特殊的类和其他逻辑，我倾向于将所有内容移动到实际视图中。

JSBin：http://jsbin.com/ucanam/99/edit

按型号属性设置把手属性

2 个答案: