What happened to tokenList styling for Polymer 1.0

Question

In Polymer 0.5, one could use the tokenList filter with expressions on an elements class attribute to apply classes conditionally based on object values. What is the v1.0 replacement or equivalent technique? I can't find anything on the subject beyond handling it entirely in code.

Answer 1

Polymer 1.0 made quite a few cuts in favor of performance gains, expressions being one of those.

Using the example from the 0.5 documentation:

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

You could re-write for 1.0 like so:

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

Then in your element's js:

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

Make sure that any properties that are subject to change (and that the resulting value depends on) are passed as parameters to the function. If these properties are updated, polymer will re-compute the value. Also make sure that each property passed to the function are initialized in some way -- Polymer won't compute the property if any arguments are undefined.

Another thing to be aware of is that any occurrence of {{}} must take up the whole attribute or text content, so you can't have things like class="foo {{bar}}". If you need to declaratively add a class name to your element, you could do something like this:

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