【问题标题】：Polymer 1.0 - Binding css classesPolymer 1.0 - 绑定 css 类
【发布时间】：2015-06-02 22:01:43
【问题描述】：

我正在尝试包含基于 json 参数的类，因此如果我有属性颜色，则 $= 可以将其作为类属性传递（基于聚合物 documentation）

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

问题是当我试图将这个类添加到现有的一组类中时，例如：

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

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

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

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

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

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

编辑：

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

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

现在可以使用了。

【讨论】：

我害怕这个答案，但我会接受它，因为它似乎不是一个更好的解决方法。谢谢！

【解决方案2】：

更新

从Polymer 1.2.0 开始，您现在可以使用Compound Bindings 来

在单个属性绑定或文本内容绑定中组合字符串文字和绑定

像这样：

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

还有你的例子

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

所以这不再是问题。

以下答案现在仅与 1.2 之前的聚合物版本相关

如果您经常这样做，直到此功能可用（希望是 soon），您可以在一个地方将该功能定义为 Polymer.Base 的属性，它的所有属性都被所有聚合物元素继承

//TODO remove this later then polymer has better template and binding features.
// make sure to find all instances of {{join( in polymer templates to fix them
Polymer.Base.join = function() { return [].join.call(arguments, '');}

然后这样称呼它：

<div class$="{{join('avatar', ' ', color)}}"></div>

然后当它被聚合物正确引入时，只需删除那一行，然后替换

{{join('avatar', color)}}

与

avatar {{color}}

我现在经常使用它，不仅用于将类组合成一个类，还用于路径名、用“/”连接以及一般文本内容之类的东西，所以我使用第一个参数作为粘合剂.

Polymer.Base.join = function() {
    var glue = arguments[0];
    var strings = [].slice.call(arguments, 1);
    return [].join.call(strings, glue);
}

或者如果你可以使用 rest arguments 等 es6 功能

Polymer.base.join = (glue, ...strings) => strings.join(glue);

做类似的事情

<div class$="{{join(' ', 'avatar', color)}}"></div>
<img src="{{join('/', path, to, image.jpg)}}">
<span>{{join(' ', 'hi', name)}}</span>

只是基本的

Polymer.Base.join = (...args) => args.join('');
<div class$="{{join('avatar', ' ', color)}}"></div>

【讨论】：

【解决方案3】：

        <template if="[[icon_img_src]]" is="dom-if">
            <img class$="{{echo_class(icon_class)}}" src="[[icon_img_src]]">
        </template>

        <span class$="{{echo_class(icon_class, 'center-center horizontal layout letter')}}" hidden="[[icon_img_src]]">[[icon_text]]</span>

        <iron-icon icon="check"></iron-icon>

    </div>
</template>

<script>
Polymer({

    echo_class: function(class_A, class_Z) {
        return class_A + (class_Z ? " " + class_Z : "");
    },

【讨论】：