防止聚合物将子元素class设置为style-scope

Question

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

我的主要问题是类"style-scope"one_answers"My -element"被应用到元素中的每个子节点。当使用这样的内容时，这不是问题:

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

它只是把它们的类分别改为"top style-scope my-element"one_answers"green style-scope my-element"，然后一切正常。

但是现在在聚合物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'等等)，但是当它完成时，类显示为每个span的"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