Polymer 1.0 - 绑定(bind) css 类

Question

我正在尝试包含基于 json 参数的类，所以如果我有属性颜色，则 $= 可以将其作为类属性传递(基于 polymer documentation)

<div class$="{{color}}"></div>

问题是当我试图沿着现有的一组类添加该类时，例如:

<div class$="avatar {{color}}"></div>

在这种情况下， $= 就不行了。有什么方法可以做到这一点，或者每次我有条件地添加一个类时，我必须通过 css 选择器而不是类来包含其余样式？我知道在这个例子中，颜色可能只是简单地放在样式属性中，这纯粹是一个说明问题的例子。

请注意，这只是 Polymer 1.0 中的问题。

Answer 1

从 Polymer 1.0 开始，尚不支持字符串插值(路线图中将尽快提及)。但是，您也可以使用计算绑定(bind)来执行此操作。例子

<dom-module>
  <template>
    <div class$="{{classColor(color)}}"></div>
  </template>
</dom-module>
<script>
  Polymer({
    ...
    classColor: function(color) {
      return 'avatar '+color;
    }
  });
<script>

编辑:

从 Polymer 1.2 开始，您可以使用复合绑定(bind)。所以

<div class$="avatar {{color}}"></div>

现在工作。