防止 polymer 将子元素 class 设置为 style-scope

Question

我在迁移到 Polymer 1.0 时遇到了一些问题

我的主要问题是 classes "style-scope" 和 "my-element" 被应用于元素中的每个子节点。使用这样的东西时这不是问题：

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

它只是将它们的 classes 分别更改为 "top style-scope my-element" 和 "green style-scope my-element"，一切正常。

但是现在在 Polymer 1.0 上我无法将 classname 绑定到属性，所以我必须用这样的东西来计算它：

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

创建元素时，创建的每个跨度都会通过 setitemclass 函数，并且 returns 它应该做什么（类似于 'itnumb1'、'itnumb2' 等等)，但是当它完成时，每个跨度的 class 都显示为 "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

防止 polymer 将子元素 class 设置为 style-scope

Prevent polymer from setting sub-elements class to style-scope

polymer

polymer-1.0