Polymer 1.0的tokenList样式发生了什么

Question

在Polymer 0.5中,可以使用带有元素类属性表达式的tokenList过滤器,根据对象值有条件地应用类.什么是v1.0替换或等效技术？除了在代码中完全处理它之外,我找不到关于这个主题的任何内容.

Answer 1

Polymer 1.0 为了提高性能而进行了相当多的削减，表达式就是其中之一。

使用 0.5 文档中的示例：

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

你可以像这样重写 1.0：

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

然后在你的元素的js中：

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

确保任何可能更改的属性（以及结果值所依赖的属性）都作为参数传递给函数。如果更新这些属性，聚合物将重新计算该值。还要确保传递给函数的每个属性都以某种方式初始化——如果任何参数为 ，Polymer 将不会计算该属性undefined。

另一件需要注意的事情是，任何出现的 都{{}}必须占据整个属性或文本内容，因此不能有类似 的东西class="foo {{bar}}"。如果您需要以声明方式向元素添加类名，您可以执行以下操作：

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