Question

我还在学习ember，而且我没有得到如何应用某些CSS类，具体取决于某个控制器上返回的模型字符串。

官方文档（http://emberjs.jsbin.com/yoqifiguva/1/edit?html,js,output）仅涵盖布尔值。

我没有设法将这些知识用于我的案例。我有状态字符串字符串，如：＆＃34;传递＆＃34;，＆＃34;失败＆＃34;，＆＃34;下垂＆＃34;和＃34;阻止＆＃34;，我想为每个状态应用不同的css类。

有关如何实现这一目标的任何示例？

Answer 1

您可以使用bind-attr，例如：

<ul>
{{#each item in model}}
  <li {{bind-attr class='item.status'}}>An item with status: `{{item.status}}`</li>
{{/each}}
</ul>

生成以下HTML：

<ul>
  <li class="passed" data-bindattr-262="262">An item with status: `passed`</li>
  <li class="failed" data-bindattr-265="265">An item with status: `failed`</li>
</ul>

收藏：

[
  YourModel.create({ status: 'passed'}),
  YourModel.create({ status: 'failed'})
]

对象声明如下：

YourModel = Em.Object.extend({
  status: null
});

Demo.

您还可以创建可以在许多模型中重复使用的Component。组件代码：

App.StatusItemComponent = Em.Component.extend({
  classNameBindings: ['status'],

  status: function() {
    var modelStatus = this.get('model.status');
    if (modelStatus)
      return 'status-' + modelStatus;
  }.property('model.status')
});

模板代码：

{{#each item in model}}
  {{#status-item model=item}}
    An item with status: {{item.status}}
  {{/status-item}}
{{/each}}

Demo.

根据返回的Ember字符串设置CSS类

1 个答案: