Polymer 1.0的tokenList样式发生了什么变化

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


聚合物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)}}">
链接地址: http://www.djcxy.com/p/26699.html

上一篇: What happened to tokenList styling for Polymer 1.0

下一篇: Copying nested lists in Python