21

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

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

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

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

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

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

4

3 回答 3

34

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

现在工作。

于 2015-06-02T22:35:38.523 回答
12

更新

从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 之前的聚合物版本相关

如果您经常这样做，直到此功能可用，希望很快您可以在一个地方将该功能定义为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 的特性，比如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>
于 2015-09-29T20:14:04.693 回答
0 
        <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 : "");
    },
于 2015-08-15T16:41:37.073 回答