ember.jsハンドルバーテンプレートでは、静的クラス属性と動的クラスの両方の属性を持つ方法はありますか?
-
26-10-2019 - |
質問
既にオーバールされているTo Appの例を使用して、「TODO」クラス(静的)と「IS-DONE」クラス(動的)を持つ要素が必要だとしましょう。
<div {{bindAttr class="todo isDone"}}>
Other stuff in here
</div>
この場合、「ISDONE」と「TODO」はどちらも私のビューオブジェクトのプロパティであると予想されています。私は現在、静的な「TODO」文字列に等しい「TODO」プロパティを自分の見解に追加することで、これを回避しています。 Bindattrを使用するときに静的クラス属性を持つ方法はありますか?
フィドルの例: http://jsfiddle.net/nes4h/4/
解決
編集:
これをEmberで修正しました!
マスターからのビルド、または0.9.6がリリースされた後、次のことができます。
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
前の答え:
残念ながら、使用するときに静的クラス名と動的クラスの両方の名前を持つことはできません bindAttr
.
ビューで1つ以上の計算されたプロパティを使用して、静的クラス名と動的クラス名の両方を出力することをお勧めします。
静的クラス名と動的なクラス名の両方をサポートするのはとてもいいことですが、方法 bindAttr
現在動作していますが、不可能です。 bindAttr
テンプレートコンパイル中に添付されている要素については何も知りません。
他のヒント
Bindattrでできるかどうかはわかりませんが #view
ヘルパーでは、静的クラスと動的クラスの両方を設定できます。
{{#view App.TodoView class="todo" classBinding="isDone"}}
inner content
{{/view}}
Ember Masterでは、静的クラスを中に指定できるように、今日変更が行われました bindAttr
コロンを準備することによって。
https://github.com/emberjs/ember.js/commit/ce385e3294be019215c555511c7f393aebc02e41
もちろん、これは次のリリースの前に変更される可能性がありますが、これはEmber Coreチームが解決したい問題です。
Ember 1.10.0では、Bindattrは非推奨です。変数をDivのクラスに直接バインドできます。ここで、色変数はdivのクラスにバインドされています。
<div class="{{color}}"></div>
ヘルパーをこれらのコンテキストで使用できる場合のインライン:
<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>
http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html