javascript - Polymer 1.0的tokenList样式发生了什么

在Polymer 0.5中，可以将tokenList过滤器与elements类属性上的表达式一起使用，以根据对象值有条件地应用类。什么是v1.0替代或等效技术？除了完全在代码中处理之外，我找不到关于此主题的任何内容。

最佳答案

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，Polymer将不会计算该属性。

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

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