css - 有条件地在 polymer 中添加CSS类

Question

我在 polymer 组件中有一个元素，想有条件地添加一个 css 类。

<div class="bottom {{completed: item.completed}}">

如果 item.isCompleted 为真，则添加 .completed 类。

但是，我遇到了以下错误:

无效的表达式语法:completed?: item.completed

我不想将 hole 子树放在模板条件中。是否可以在 html 标签内使用表达式？我使用的是最新的 polymer 版本，此功能是否以任何方式迁移或替换？

Answer 1

tokenlist 技术在 Polymer 0.5 中有效，但已被弃用。

从 Polymer 1.2 开始，以下工作:

<dom-module ...>
  <template>
    <div class$="bottom [[conditionalClass(item.completed)]]"></div>
  </template>
  <script>
    Polymer({
      ...
      conditionalClass: function(completed) {
        return completed ? 'completed' : '';
      }
    });
  <script>
</dom-module>

另见类似问题:Polymer 1.0 - Binding css classes