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

Используя пример использования уже запущенного приложения, скажем, мне нужен элемент с классом "todo" (статический) и класс "is-done" (динамический):

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

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

Пример скрипта: http://jsfiddle.net/nes4H/4/

Ответы

Ответ 1

EDIT:

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

В сборке с мастера или после выпуска 0.9.6 вы можете сделать следующее:

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

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

К сожалению, при использовании bindAttr у вас не может быть как статических, так и динамических имен классов.

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 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-released.html