javascript - 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 将重新计算该值。还要确保传递给函数的每个属性都以某种方式初始化——如果任何参数未定义，Polymer 将不会计算该属性。

另一件需要注意的事情是 {{}} 的任何出现都必须占据整个属性或文本内容，所以你不能有像class="foo {{bar}}"。如果您需要以声明方式向您的元素添加类名，您可以这样做:

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