В шаблоне руля ember.js есть ли способ иметь как статические, так и динамические атрибуты класса?

Question

Используя и без учебного примера приложения, допустим, я хочу элемент с классом «todo» (Static) и классом «Dodone» (Dynamic):

<div {{bindAttr class="todo isDone"}}>
  Other stuff in here
</div>

В этом случае, как ожидается, «Isdone» и «todo» будут свойствами для моего объекта взгляда, что я хочу для «Isdone», но не для «todo». В настоящее время я работаю над этим, добавляя свойство «todo» на мою точку зрения, которая равна статической строке «todo». Есть ли способ иметь статический атрибут класса при использовании Bindattr?

Пример скрипки: http://jsfiddle.net/nes4h/4/

Answer 1

РЕДАКТИРОВАТЬ:

Мы исправили это в Ember!

На сборке от Master или после выпуска 0,9,6 вы можете сделать:

<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>

---

Предыдущий ответ:

У вас, к сожалению, нельзя иметь как статические, так и динамические имена классов при использовании bindAttr.

Я предлагаю использовать один или несколько вычисленных свойств в вашем представлении для вывода как статических, так и динамических имен классов.

Поддержка как статических, так и динамических имен классов было бы очень хорошим, но путь bindAttr В настоящее время работает, это невозможно. bindAttr Ничего не знает о элементе, к которому он прикреплен во время компиляции шаблона.

Answer 2

Я не знаю, сможете ли вы сделать это с Bindattr, но #view Помощник позволяет вам устанавливать как статические классы, так и динамические:

{{#view App.TodoView class="todo" classBinding="isDone"}}
  inner content
{{/view}} 

Answer 3

В Ember Master сегодня было совершено изменение, чтобы позволить указать статические классы в bindAttr Приготовление толстой кишки.

https://github.com/emberjs/ember.js/commit/ce385e3294be019215c5555511c7f393aebc02e41

Конечно, это может измениться до следующего выпуска, но это проблема, которую команда Ember Core хочет решить.

Answer 4

В Ember 1.10.0 Bindattr устарел. Вы можете напрямую связать переменную с классом Div. Здесь цветовая переменная связана с классом Div:

<div class="{{color}}"></div>

Встроенный, если вспомогатель также может использоваться в этих контекстах:

<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>

http://emberjs.com/blog/2015/02/07/ember-1-10-0-relued.html