2

特定の条件が true になったときに CSS クラスを要素に適用し、条件が false になったときにそのクラスを削除したい。これは Web プログラミングではかなり一般的なパターンであり、Polymer を使用してこれを行う慣用的な方法を知りたいです。

4

2 に答える 2

4

bindCssClass非推奨です (Polymer 0.10.0-pre.4 以降)

CSS クラスを Map にバインドできるようになりました。

@observable var btnClasses = toObservable({'someclass': true, 'someotherclass': false});

<polymer-element name="spark-button" class="{{btnClasses}}">
  <template>
    ...
</polymer-element>
于 2014-03-27T15:08:46.150 に答える
1

この答えはもはや有効ではありません。代わりに受け入れられた回答を使用してください。

bindCSSClassCSS クラスを要素に条件付きでバインドするために使用します。以下のクリックカウンターの例では、値が 3 で割り切れる場合にのみカウンター値を表示する要素に「blue」クラスが適用されます。

import 'package:polymer/polymer.dart';

@CustomTag('click-counter')
class ClickCounter extends PolymerElement with ObservableMixin {
  @observable int count = 0;

  void increment() {
    count++;
  }

  ClickCounter() {
    bindProperty(this, const Symbol('count'),
        () => notifyProperty(this, const Symbol('divByThree')));
  }

  bool get divByThree => count % 3 == 0;

  void created() {
    super.created();
    var root = getShadowRoot("click-counter");
    var item = root.query('#click-display');
    bindCssClass(item, 'blue', this, 'divByThree');
  }
}

この例では、getter を使用して、値が 3 で割り切れるかどうかを確認します。

  bool get divByThree => count % 3 == 0;

次に、getter の観察可能なバインディングを作成します。

  ClickCounter() {
    bindProperty(this, const Symbol('count'),
        () => notifyProperty(this, const Symbol('divByThree')));
  }

次に、「created()」内で、CSS クラスが適用されている (および適用されていない) 要素を見つけます。

    var root = getShadowRoot("click-counter");
    var item = root.query('#click-display');

そして、ブール値を返す getter にbindCssClass基づいて CSS クラスを要素にバインドするために使用します。divByThree

    bindCssClass(item, 'blue', this, 'divByThree');

この場合、「blue」クラスは、divByThreetrue を返すときに要素に適用され、false を返すときに適用されません。

bindCssClassobserve内のパッケージで定義されていますhtml.dart。

このコードを使用する完全なアプリは、https://github.com/shailen/dartythings/tree/master/bindCSSで確認できます。

于 2013-09-26T17:32:25.220 に答える