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/

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

1 个答案: