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;
}

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

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

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

Polymer 1.0的tokenList样式发生了什么

1 个答案: