したがって、バインドされた属性 (この場合はクラス名) の組み合わせを取得するには、バインド基準をスペースで区切ってリストできます。
基本的に、{{bindAttr ...}} ヘルパーで、boundAttr="criterion1 criteria2 criteria3" と記述できます。ここで、個々のバインディング基準は次の形式に展開されます。
プロパティ置換
propertyName
これは、2 つの異なる動作を持つ classNames のスタブです。
- プロパティ値がブール値の場合: 破線のプロパティ名
- プロパティ値が文字列の場合: 文字列値
静的クラス/常に真:
:className
クラス名を常に div に追加します。
プロパティの条件付き:
propertyName:trueClass
propertyName:trueClass:falseClass
propertyName::falseClass
プロパティを評価し、真偽値に基づいて適切なクラスを割り当てます。
あなたの場合、2 つのクラスを同じプロパティにぶら下げたいので、次のようにすることができます。
<div {{bindAttr class="App.User.isLoggedIn:alert App.User.isLoggedIn:alert-error:hide"}} >
...
</div>
ここのスペースに注意してください。最初の基準はアラート クラスのみを処理し、2 番目の基準はそれに応じて「alert-error」または「hide」クラスを処理します。
さらに単純なものが必要な場合は、ビューまたはモデルに適用する必要がある文字列を決定する計算プロパティを使用できます。
それからあなたはすることができます
// in your view
classesNeeded: function() {
return App.User.get('isLoggedIn') ? 'alert alert-error' : 'hide';
}.property('App.User.isLoggedIn')
その後:
<div {{bindAttr class="view.classesNeeded"}} >
...
</div>
すべてのケースで 3 番目のデフォルト クラスが必要な仮想ケースでは、次のようにすることができます。
<div {{bindAttr class=":defaultClass view.classesNeeded"}} >
...
</div>
新しい ember.js ドキュメントで、属性とクラスのバインディングについて詳しく読むことができます:
http://emberjs.com/guides/templates/binding-element-class-names/