動態設置手把類

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') 
}); 

Sameple Demo

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.