根据模型属性向列表添加标签

Question

我有一个显示用户列表的 ember 应用程序。我想为列表中的每个项目添加一个标签，以指示用户是可用还是离线，类似于此伪代码中的逻辑：

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

这是否可以在模板中完成，还是需要在单独的 JavaScript 函数中执行？我对 Web 开发和 ember 很陌生。这是我尝试添加绿色引导标签的 html：

<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 的计算属性：

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

并在您的模板检查中使用：

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

类似http://jsfiddle.net/marciojunior/NSuS3/