0

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

<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";
  } 
}

没有运气

4

2 回答 2

1

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

更改您的{{each}}助手以包含itemController具有 value 的属性server。

{{#each controller itemController="server"}}

App.ServerController这将告诉 Ember 为集合中的每个服务器创建一个实例。服务器模型将成为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为一个依赖于 的计算属性percentFree。

还要从模型中删除有关状态的所有内容。

在Ember.js API 文档中阅读有关{{each}}帮助程序的更多信息。

于 2013-06-07T05:35:39.457 回答
0

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

<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

于 2013-06-05T20:57:30.270 回答