聚合物 1.0 - 结合 css 类

Question

我试图根据 json 的参数包含 classes，所以如果我有属性颜色，$= 就可以将其作为class 属性（基于聚合物 documentation）

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

问题是当我尝试将 class 添加到现有的 class 集合中时，例如：

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

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

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

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

Answer 3

更新

从 Polymer 1.2.0, you can now use Compound Bindings 到

combine string literals and bindings in a single property binding or text content binding

像这样：

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

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

和你的例子

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

所以这不再是问题。

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

如果你经常这样做，直到这个功能可用，希望 soon you could just define the function in one place as a property of 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>

聚合物 1.0 - 结合 css 类

Polymer 1.0 - Binding css classes

polymer

polymer-1.0

更新

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