ember.js - Ember: ビューの親要素に classNameBindings を設定する方法

Question

http://jsfiddle.net/4ZyBM/6/を参照してください

UI 要素に Bootstrap を使用したいのですが、特定の要素を Ember ビューに変換しようとしています。次の問題があります。

特定のクラス (コントロール グループ) を持つ DIV に入力要素を埋め込みます。フィールドで検証エラーが発生した場合、追加のクラス「エラー」を DIV に追加したいと考えています。

Ember.TextField に基づいてビューを作成し、エラーが発生した場合は ClassNameBinding を「エラー」にするように指定できますが、問題は、クラスが DIV ではなく入力要素に設定されていることです。

フィールドに英数字以外の文字を入力して、これをテストできます。入力フィールドの境界線ではなく、DIV の境界線を赤で表示したいと思います。

HTML:

<script type="text/x-handlebars">
    <div class="control-group">
    {{view App.AlphaNumField valueBinding="value" type="text" classNames="inputField"}}
    </div>
</script>

JS:

App.AlphaNumField = Ember.TextField.extend({
  isValid: function () {
    return /^[a-z0-9]+$/i.test(this.get('value'));
  }.property('value'),
  classNameBindings: 'isValid::error'
})

親要素または入力に最も近い要素に classNameBindings を設定できますか? jQuery では、次のように使用します。

$(element).closest('.control-group').addClass('error');