How do I bind a CSS class to an observable object or property in Polymer?

Question

I want a CSS class to be applied to an element if a certain condition becomes true and that class to be removed when the condition becomes false. This is a pretty common pattern in web programming and I want to know the idiomatic way to do this using Polymer.

Answer 1

bindCssClass is deprecated (as of Polymer 0.10.0-pre.4)

CSS-classes can now be bound to a Map.

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

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