基於模型屬性添加標籤到列表

Question

我有一個顯示用戶列表的應用程序應用程序。我想一個標籤，在列表中添加到每個項目，表示如果用戶是可用或離線，像在這個僞邏輯：

if (user.state == "available") 
//add a green label 
else if (user.state == "idle") 
//add an orange label 
else 
//add a red label 

這是可以做到在模板中或是否需要單獨使用JavaScript功能？我對web開發和燼類很陌生。這是我與我的企圖HTML在加入綠色引導標籤：

isOnline: function() { 
    return this.get('state') == 'online'; 
}.property('state') 

且模板中檢查使用：

<script type = "text/x-handlebars" id = "users"> 

<div class="col-md-2"> 
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}} 
</div> 
<div class="col-md-10"> 

    <ul class="list-group"> 
    {{#each user in controller}} 

    <li class="list-group-item"> 
//Add a green label if user is online 

if (user.state == "online") 
{ 
    {{#link-to "user" user}} 
     {{user.firstName}} {{user.lastName}} 
    {{/link-to}} 
<span class="label label-success">Online</span> 
} 
    </li> 
{{/each}} 

</ul> 

{{outlet}} 
</div> 
</script> 

Answer 1

您可以創建一個計算的屬性稱爲isOnline這樣

{{#if user.isOnline}}      
    <span class="label label-success">Online</span> 
{{else}} 
    <span class="label label-danger">Offline</span> 
{{/if}} 

類似這樣http://jsfiddle.net/marciojunior/NSuS3/