4

ember の動的な値に基づいてクラスを div にバインドしたい。false の場合は DOM 要素を非表示にし、値が true の場合は 2 つのクラスを追加する必要があります。

これが私のコードです：

<div {{bindAttr class="App.User.isLoggedIn:alert alert-error:hide" }} >
    ...
</div>

ただし、バインディングは機能せず、app.User.isLoggedIn が false の場合でも div が表示され続けます。

true 条件に基づいて複数のクラスをバインドするにはどうすればよいですか?

4

2 に答える 2

7

したがって、バインドされた属性 (この場合はクラス名) の組み合わせを取得するには、バインド基準をスペースで区切ってリストできます。

基本的に、{{bindAttr ...}} ヘルパーで、boundAttr="criterion1 criteria2 criteria3" と記述できます。ここで、個々のバインディング基準は次の形式に展開されます。

プロパティ置換

propertyName

これは、2 つの異なる動作を持つ classNames のスタブです。

  1. プロパティ値がブール値の場合: 破線のプロパティ名
  2. プロパティ値が文字列の場合: 文字列値

静的クラス/常に真:

: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/

于 2013-01-24T06:00:31.563 に答える
3

代わりにclassNameBindingsを使用してみてください。選択したプロパティの状態に応じて、スタイル クラスを追加または削除できます。

たとえば、Emberjs ドキュメントの例を次に示します。

// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false
Ember.View.create({
  classNameBindings: ['isEnabled::disabled']
  isEnabled: true
});

次の HTML 表現を持つビュー インスタンスが生成されます。

<div id="ember1" class="ember-view"></div>

ビューの isEnabled プロパティが false に設定されている場合、次の HTML 表現を持つビュー インスタンスが生成されます。

<div id="ember1" class="ember-view disabled"></div>
于 2013-01-23T21:23:22.283 に答える