2013-09-24 3 views
13

Использование EmberJS/Handlebars, как я могу добавить класс к элементу, только если условие истинно?Ручные атрибуты условного класса

<div {{#if isSearching}}class="foo"{{/if}}></div> 

Нравится, но меньше псевдокода и больше реальности.

+0

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

+0

@SimonBoudrias Но это не сработает. Он избегает всех свойств после оператора if. – alt

ответ

5

Это не сработает, потому что помощник {{#if}} создаст теги в вашем HTML. Сделайте это вместо того, чтобы:

<div {{bind-attr class="isSearching:foo"}}></div> 
+1

bindAttr - это «старый» синтаксический синтаксис btw (не используется с более поздними версиями). –

+0

(это называется bind-attr в новом) –

+0

Спасибо - я обновил свой ответ – chopper

9

Вы должны использовать {{bind-attr}} помощника с логическим условием, вы можете read the guide about this.

В вашем случае, если свойство isSearching находится в контроллере, вы можете просто сделать следующее:

<div {{bind-attr class="isSearching:foo"}}></div> 

Вы можете увидеть весь код в этой скрипке: http://jsfiddle.net/NQKvy/240/

+0

Ваша ссылка на руководство нарушена. – bmavity

46

{{bind- attr}} - deprecated. Вы можете использовать новый гораздо более приятный bound attribute syntax в Ember 1.10 и выше, например:

<div class="{{if isSearching 'foo'}}"></div>  
+0

Это ответ, который я искал, благодаря Адаму. –

Смежные вопросы