按型号属性设置把手属性

我试图将<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"; 
    } 
}

没有运气

来源

2013-06-05 Taylor Skidmore

既然你只有两个值我会做到以下几点：

<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-05 20:57:30

如果我想添加第三个值，比如'＃error'，该怎么办？我打算最终添加。 –

更新的答案和一个附加示例。再一次，当你超越基本功能时，最好考虑自定义视图。任何时候我想要在模板中解决复杂问题时，我都会将其视为一种视图，复杂的事情变得更容易。 –

好的，太棒了！非常感谢你！ –

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

将您的{{each}}帮手更改为包含itemController属性，值为server。

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

这将告诉Ember为集合中的每个服务器创建一个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作为取决于percentFree的计算属性。

还从您的模型中删除有关状态的所有信息。

了解Ember.js API Docs的帮助{{each}}的更多信息。

来源

2013-06-07 05:35:39

按型号属性设置把手属性

回答

相关问题