防止聚合物将子元素类设置为样式范围

Question

我在迁移到Polymer 1.0时遇到了一些麻烦

我的主要问题是类"style-scope"和"my-element"正在应用于元素中的每个子节点.使用这样的东西时这不是问题:

<paper-dialog modal class="vertical layout">
    <div class="top">
        <div class="green">{{format(inputtext)}}</div>

它只是将它们的类分别改为"top style-scope my-element"和"green style-scope my-element",一切正常.

但是现在在Polymer 1.0上我无法将类名绑定到属性,因此我必须使用以下内容计算它:

<template is="dom-repeat" items="{{ item-list }}" as="item">
     <span class="{{setitemclass(item)}}" on-click="itemClicked" role="button" >{{item}}</span>
</template>

setitemclass: function (item) {
     return 'itnumb' + item;
}

创建元素时,创建的每个span都会通过setitemclass函数返回它应该返回的内容(类似'itnumb1','itnumb2'等等),但是当它完成时,该类显示为"style-scope my-element" "对于每一个跨度,没有叹息'itnumb#'位于任何地方.

我只是不知道如何处理这个,因为绑定在我眼中已经发生了很大变化.

谢谢!

Answer 1

为了结合到不匹配于该元件中的相应的JS属性的属性(例如class,href,data-*),则应该使用$=,而不是简单的=.

<span class$="{{setitemclass(item)}}" on-click="itemClicked" role="button">{{item}}</span>

资料来源:https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding