6

同じ要素の通常のクラスと条件付き属性バインディングを組み合わせようとすると、問題が発生することに気づきました。これが私が試しているハンドルバーのマークアップです：

<a href="#" class="button" {{bindAttr class="isDirty:dirty:clean"}} {{action save}}>Save</a>

私が生成することを期待しているのは次のとおりです。

<a href="#" class="button clean" data-bindattr-3="3" data-ember-action="4">Save</a>

しかし、実際に生成されるのは次のとおりです。

<a href="#" class="button" data-bindattr-3="3" data-ember-action="4">Save</a>

モデルを変更すると、ダーティクラスが正しく生成されます。

<a href="#" class="button dirty" data-bindattr-3="3" data-ember-action="4">Save</a>

バインド後にクラスを移動しようとすると、宣言されたクラスではなく、条件付きクラスが生成されます。

<a href="#" {{bindAttr class="isDirty:dirty:clean"}} class="button" {{action save}}>Save</a>

ボタンクラスではなく条件付きクラスを生成します。

<a href="#" class="clean" data-bindattr-3="3" data-ember-action="4">Save</a>

私が欲しいのは、ハンドルバーだけを使用して（ビューを作成せずに）結合された宣言済みクラスと条件付きクラスの両方を生成することです。これを行う別の方法はありますか？

4

2 に答える 2

11

テンプレートガイドでは、1つのアイテムの静的クラスとバインドされたクラスを組み合わせる方法について説明しています。

静的クラスとバインドされたクラスの組み合わせを持つ要素が必要な場合は、バインドされたプロパティのリストに、先頭にコロンを付けて静的クラスを含める必要があります。

あなたの場合、あなたはこのようなことをするでしょう：

<a href="#" {{bindAttr class=":button isDirty:dirty:clean"}} {{action save}}>Save</a>

これが実際の例ですhttp://jsbin.com/ixupad/82/edit

于 2013-02-25T04:57:04.183 に答える
5

Ember 1.11以降、inline-if-syntaxを使用できます

<a href="#" class="button {{if isDirty 'dirty' 'clean'}}" {{action save}}>
  Save
</a>
于 2015-09-15T00:18:03.033 に答える