What happened to the tokenList design for Polymer 1.0

Question

In Polymer 0.5, you can use the tokenList filter with expressions for an element class attribute to apply classes conditionally based on object values. What is a replacement or equivalent technique v1.0? I can not find anything on this subject, except that it is completely processed by the code.

Answer 1

Polymer 1.0 has made several cuts in favor of performance improvements, one of which is expression.

Using the example from the 0.5 documentation:

<div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList}}"> 

You can rewrite for 1.0 like this:

 <div class$="{{getClassList(user.selected, user.type)}}"> 

Then in your js element:

 getClassList: function(selected, type) { var classList = ''; if (selected) classList += ' active'; if (type == 'super') classList += 'big'; return classList; } 

Make sure that any properties that can be changed (and that the resulting value depends on) are passed as parameters to the function. If these properties are updated, the polymer will recalculate the value. Also, make sure that every property passed to the function is somehow initialized - Polymer will not evaluate the property if any arguments are undefined .

Another thing to keep in mind is that any appearance {{}} must span the entire attribute or textual content, so you cannot have things like class="foo {{bar}}" . If you need to declaratively add a class name to your element, you can do something like this:

 <div class$="{{getClassList('user-item', user.selected, user.type)}}">