2

如果某个条件变为真，我希望将 CSS 类应用于元素，并且当条件变为假时删除该类。这是 Web 编程中非常常见的模式，我想知道使用 Polymer 执行此操作的惯用方式。

4

2 回答 2

4

bindCssClass已弃用（从 Polymer 0.10.0-pre.4 开始）

CSS 类现在可以绑定到地图。

@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

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

用于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基于divByThree返回布尔值的 getter 将 CSS 类绑定到元素：

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

在这种情况下，'blue' 类在返回 true 时应用于元素，在divByThree返回 false 时取消应用。

bindCssClass在observe包内定义html.dart。

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

于 2013-09-26T17:32:25.220 回答