Conditionally add css class in polymer

Question

I have an element inside a polymer component and want to add a css class conditionally.

<div class="bottom {{completed: item.completed}}">

if item.isCompleted is true, then add the .completed class.

However, I've got the following error:

Invalid expression syntax: completed?: item.completed

I don't want to put the hole subtree inside a template conditional. Is it possible to do using an expression inside an html tag? I'm using the last polymer release, is this funtionallity migrated or replaced in any way?

Headley

Can you please add the code/HTML that shows what you have tried? Here is the doc how to bind to class polymer-project.org/docs/polymer/expressions.html#tokenlist – Vickivickie

I've edited the original question, the code line was missing. Now is visible – Headley

Answer 1

update Polymer 1.0

<div class$="[[getClasses(item.completed)]]">

getClasses: function (completed) {
  var classes = 'bottom'
  if(completed) classes += ' completed';
  return classes;
}

Even when completed could be read from this.item.completed inside getClasses() it's important to pass it as parameter from the binding. This way Polymer re-evaluates the function getClasses(item.completed) each time item.completed changed.

original - Polymer 0.5

It should look like

<div class="bottom {{ {completed: item.completed } | tokenList }}">

See docs for more details: http://polymer-project.org/docs/polymer/expressions.html#tokenlist

Senhauser

Answer 2

The tokenlist technique was valid in Polymer 0.5, but has been deprecated.

As of Polymer 1.2, the following works:

<dom-module ...>
  <template>
    <div class$="bottom [[conditionalClass(item.completed)]]"></div>
  </template>
  <script>
    Polymer({
      ...
      conditionalClass: function(completed) {
        return completed ? 'completed' : '';
      }
    });
  <script>
</dom-module>

Also see similar question: Polymer 1.0 - Binding css classes

Cleanly

What does the $= do? I didn't see it explained anywhere. It appears I need it for this scenario, though other places where I've seen it used ` simple = suffices. – Lindly

the $= is used when binding to attributes (such as: class, style, href, etc.), as opposed to properties: polymer-project.org/1.0/docs/devguide/… – Cleanly

Answer 3

the simplest way to do it:

<template>
  <style is="custom-style">
      .item-completed-true { background: red; }
  </style>
  <div class$="bottom item-completed-[[item.completed]]"></div>
</template>

Entire