0

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

Community
  • 1
  • 1
Will Squire
  • 6,127
  • 7
  • 45
  • 57
  • 1
    Most expressions aren't allowed in Polymer's binding syntax. Just properties, functions and the negation operator. – Tomasz Pluskiewicz Sep 30 '16 at 05:34
  • Possible duplicate of [Conditionally add css class in polymer](http://stackoverflow.com/questions/27228515/conditionally-add-css-class-in-polymer) – Ben Thomas Sep 30 '16 at 09:28
  • **Without** helper function Ben. I had already linked to an answer that uses this technique. Thanks – Will Squire Sep 30 '16 at 10:52

1 Answers1

1

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.

Bamieh
  • 10,358
  • 4
  • 31
  • 52
  • No, I didn't change the question. I simply put without in bold... See the edit... – Will Squire Sep 30 '16 at 11:16
  • regardless, my post still answers your question :) – Bamieh Sep 30 '16 at 15:11
  • Well, you answered but it certainly didn't answer my question :) . **Without** using a helper function, but thanks, I am using something similar to that at the moment.. there is a cleaner way though – Will Squire Sep 30 '16 at 22:07
  • clearly there is no way to achieve it without a helper function, its clearly stated in the docs. – Bamieh Oct 01 '16 at 09:05
  • 1
    Then I guess the answer to the question is no Ahmad. I'll mark this as correct for now, hopefully this will functionality will be available in future! – Will Squire Oct 02 '16 at 18:35