CODEWITHSUNDEEP
csspolymerresponsivetemplating
Will Squire
Will Squire

Reputation: 6595

How can I toggle a class using a boolean in a Polymer template?

Would like to achieve this without using a helper function as shown here. I know I can use some basic operators (i.e. !), but would like to use a bit more logic in templating. Basically the aim is to use the Boolean value set via iron-media-query to toggle a class on an element.

Pseudo code:

<div class$="[[(mobile)?'mobile-styling':null]]"></div>

P.S. the class name cannot be the boolean variable name.

Thanks

Upvotes: 0

Views: 862

Answers (1)

Bamieh
Bamieh

Reputation: 10916

Unfortunately this feature has been deprecated for performance improvements. polymer 1.0+ only support the following:

  1. A property or subproperty path (users, address.street).
  2. A computed binding (_computeName(firstName, lastName, locale)).
  3. Any of the above, preceded by the negation operator (!).

here is an example for how you can achieve computed binding:

<dom-module ...>
  <template>
    <div class$="[[hasMobileStyle(mobile)]]"></div>
  </template>
  <script>
    Polymer({
      ...
      hasMobileStyle: function(mobile) {
        return mobile ? 'mobile-styling' : '';
      }
    });
  <script>
</dom-module>

you can also use the boolean as a selector to get rid of the computed binding:

<div class$="mobile-styling--[[mobile]]"></div>

and you'd do a selector on .mobile-styling--true

What you are asking for cannot be done. only the three conditions work, [[(mobile)?'mobile-styling':null]] does not fit the criteria.

Upvotes: 1

Related Questions