Установить класс руля на лету

Question

Я хотел бы обновить класс div в соответствии с пользовательским вводом. Простой текст ввода, который необходимо проверить. Мне нужно пойти с помощником, но я не могу понять это.

<div class="{{validationClass}}"> 
    <p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p> 
</div> 

Когда ничего не написано в текстовом поле, я хотел бы, чтобы окружить коробку с красным цветом, после того, как используется напечатал один символ, я хочу, чтобы идти по умолчанию. Таким образом, в соответствии с начальной загрузки 2.x я должен был бы установить класс Div в control-group error или control-group success т.д.

Я никогда не создал помощника, так что я изо всех сил, я не знаю, как назвать это и как вернуть нужную строку, подлежащую замене, в {{validationClass}}

Спасибо.

Answer 1

Вы можете использовать вспомогательный помощник bind-attr.

Это пример:

<script type="text/x-handlebars" data-template-name="index"> 
    <div {{bind-attr class=":control-group validationClass"}}> 
    <p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p> 
    </div> 
</script> 

App.IndexController = Ember.ObjectController.extend({ 
    title: null, 
    validationClass: function() { 
     var title = this.get('title'); 
     return title ? 'success' : 'error'; 
    }.property('title') 
}); 

http://jsfiddle.net/marciojunior/6Kgty/

Answer 2

Использование {{bind-attr}} помощник

{{!hbs}} 
<div {{bind-attr class=":control-group isError:error"}}> 
    {{input type="text" class="form-control" value=testVal}} 
</div> 

//Controller 
App.ApplicationController = Em.Controller.extend({ 
    testVal: '', 
    isError: Em.computed.empty('testVal') 
}); 

Demo Sameple