聚合物1.0 -绑定css类

Question

我试图包含基于json参数的类，所以如果我有属性颜色，$=使技巧将其作为类属性传递(基于聚合物文档)

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

问题是当我试图将该类添加到现有的类集时，例如:

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

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

请注意，这是一个问题，只有在聚合物1.0。

Answer 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>

现在

。

Answer 2

更新

从Polymer 1.2.0开始，你可以使用复合绑定

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

一样:

<img src$="https://www.example.com/profiles/{{userId}}.jpg">
<span>Name: {{lastname}}, {{firstname}}</span>

和你的例子

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

这不再是一个问题。

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

如果你经常这样做，直到这个功能可用(希望很快)，你可以在一个地方定义这个函数作为聚合物的属性。碱具有所有聚合物元素所继承的所有性质

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

或者如果你可以使用es6的特性，如rest参数

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>

Answer 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 : "");
    },