Как связать класс CSS с наблюдаемым объектом или свойством в Polymer?

Question

Я хочу, чтобы CSS-класс применялся к элементу, если определенное условие становится истинным, и этот класс удаляется, когда условие становится ложным. Это довольно распространенный шаблон в веб-программировании, и я хочу знать идиоматический способ сделать это с помощью Polymer.

Answer 1

bindCssClass устарела (по состоянию на 0.10.0-pre.4 Полимера)

CSS-классы теперь могут быть привязаны к карте.

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

В примере мы используем метод получения, чтобы проверить, делится ли значение на 3:

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

Затем мы создаем наблюдаемую привязку для получателя:

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

Затем внутри функции create ()`мы находим элемент, к которому применяется (и не применяется) класс CSS:

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

И мы используем bindCssClass привязать класс CSS к элементу на основе divByThree getter, возвращающий логическое значение:

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

В этом случае "синий" класс применяется к элементу, когда divByThree возвращает true и не применяется, когда возвращает false.

bindCssClass определяется в observe пакет в html.dart,

Вы можете увидеть полное приложение, использующее этот код, по адресу https://github.com/shailen/dartythings/tree/master/bindCSS.