Question

如果某个条件变为true，我想要一个CSS类应用于一个元素，当条件变为false时，我想要删除该类。这是Web编程中非常常见的模式，我想知道使用Polymer实现此目的的惯用方法。

Answer 1

不推荐使用

bindCssClass（自Polymer 0.10.0-pre.4起）

CSS-classes现在可以绑定到Map。

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

<polymer-element name="spark-button" class="{{btnClasses}}">
  <template>
    ...
</polymer-element>

Answer 2

此答案不再有效。请改用接受的答案。

使用bindCSSClass有条件地将CSS类绑定到元素。在下面的点击计数器示例中，只有当值可以被三整除时，“蓝色”类才会应用于显示计数器值的元素：

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');

我们使用bindCssClass将CSS类绑定到基于divByThree getter返回布尔值的元素：

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

在这种情况下，当divByThree返回true时，'blue'类应用于元素，而当返回false时，则应用un-apply。

bindCssClass在observe内的html.dart包中定义。

您可以在https://github.com/shailen/dartythings/tree/master/bindCSS看到使用此代码的完整应用。

如何将CSS类绑定到Polymer中的可观察对象或属性？

2 个答案:

此答案不再有效。请改用接受的答案。