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

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


dart polymer dart-polymer
person Shailen Tuli    schedule 26.09.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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>
person Günter Zöchbauer    schedule 27.03.2014

arrow_upward
1
arrow_downward

Этот ответ больше недействителен. Вместо этого используйте принятый ответ.

Используйте 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')));
  }

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

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

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

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

В этом случае «синий» класс применяется к элементу, когда divByThree возвращает значение «истина», и не применяется, когда он возвращает значение «ложь».

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

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

person Shailen Tuli    schedule 26.09.2013