В шаблоне руля ember.js есть ли способ иметь как статические, так и динамические атрибуты класса?
-
26-10-2019 - |
Вопрос
Используя и без учебного примера приложения, допустим, я хочу элемент с классом «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/
Решение
РЕДАКТИРОВАТЬ:
Мы исправили это в Ember!
На сборке от Master или после выпуска 0,9,6 вы можете сделать:
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
Предыдущий ответ:
У вас, к сожалению, нельзя иметь как статические, так и динамические имена классов при использовании bindAttr
.
Я предлагаю использовать один или несколько вычисленных свойств в вашем представлении для вывода как статических, так и динамических имен классов.
Поддержка как статических, так и динамических имен классов было бы очень хорошим, но путь bindAttr
В настоящее время работает, это невозможно. bindAttr
Ничего не знает о элементе, к которому он прикреплен во время компиляции шаблона.
Другие советы
Я не знаю, сможете ли вы сделать это с Bindattr, но #view
Помощник позволяет вам устанавливать как статические классы, так и динамические:
{{#view App.TodoView class="todo" classBinding="isDone"}}
inner content
{{/view}}
В Ember Master сегодня было совершено изменение, чтобы позволить указать статические классы в bindAttr
Приготовление толстой кишки.
https://github.com/emberjs/ember.js/commit/ce385e3294be019215c5555511c7f393aebc02e41
Конечно, это может измениться до следующего выпуска, но это проблема, которую команда Ember Core хочет решить.
В Ember 1.10.0 Bindattr устарел. Вы можете напрямую связать переменную с классом Div. Здесь цветовая переменная связана с классом Div:
<div class="{{color}}"></div>
Встроенный, если вспомогатель также может использоваться в этих контекстах:
<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>