按型號屬性設置把手屬性

我試圖將<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

按型號屬性設置把手屬性

回答

相關問題