Установить класс CSS в зависимости от возвращаемой строки с помощью Ember

Question

Я все еще изучаю ember, и я не понял, как применить определенный класс CSS в зависимости от возвращаемой строки модели на определенном контроллере.

Официальная документация ( http://emberjs.jsbin.com/yoqifiguva/1/edit?html,js,output) распространяется только при наличии логического значения.

Мне не удалось применить эти знания для моего случая. У меня есть строка статуса строки, такие как: "пройдено", "не удалось", "нерешено" и "заблокировано", которые я хочу применить разные классы 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.