Polymer 1.0 - 绑定css类

Question

我正在尝试根据json的参数包含类,所以如果我有属性颜色,$ =会把它作为类属性传递(基于聚合物文档)

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

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

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

在那种情况下,$ =不起作用.有没有办法完成这个或每次我有条件地添加一个类我必须通过css选择器而不是类包括其余的样式？我知道在这个例子中也许颜色可以简单地进入样式属性,它纯粹是一个例子来说明问题.

请注意,这仅在Polymer 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

更新

由于聚合物1.2.0,现在可以使用复合绑定到

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

像这样:

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

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

和你的榜样

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

所以这不再是一个问题.

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

如果你正在做这么多,直到这个功能变得可用,希望很快你可以在一个地方定义函数作为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);
}

或者如果你可以使用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>