聚合物1.0-绑定CSS类 [英] Polymer 1.0 - Binding css classes

问题描述

我试图基于json的参数包含类，因此，如果我具有属性color，则$ =可以将其作为类属性传递(基于聚合物

I'm trying to include classes based on parameters of a json, so if I have the property color, the $= makes the trick to pass it as a class attribute (based on the polymer documentation)

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

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

The problem is when I'm trying to add that class along an existing set of classes, for instance:

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

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

In that case $= doesn't do the trick. Is any way to accomplish this or each time that I add a class conditionally I have to include the rest of the styles through css selectors instead classes? I know in this example maybe the color could just simple go in the style attribute, it is purely an example to illustrate the problem.

请注意，这仅在Polymer 1.0中是一个问题.

Please, note that this is an issue only in Polymer 1.0.

推荐答案

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

As of Polymer 1.0, string interpolation is not yet supported (it will be soon as mentioned in the roadmap). However, you can also do this with computed bindings. Example

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

从聚合物1.2开始，您可以使用化合物结合.所以

As of Polymer 1.2, you can use compound binding. So

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

现在有效.

这篇关于聚合物1.0-绑定CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！