有条件地在聚合物中添加 css 类答案

【问题标题】：Conditionally add css class in polymer有条件地在聚合物中添加 css 类
【发布时间】：2015-01-29 11:10:34
【问题描述】：

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

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

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

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

无效的表达式语法：完成？：item.completed

我不想将洞子树放在模板条件中。是否可以在 html 标签中使用表达式？我正在使用最后一个聚合物版本，此功能是否已迁移或以任何方式替换？

【问题讨论】：

您能否添加显示您尝试过的代码/HTML？这是文档如何绑定到classpolymer-project.org/docs/polymer/expressions.html#tokenlist
我已经编辑了原始问题，缺少代码行。现在可见

标签： css expression polymer

【解决方案1】：

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

作为聚合物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 P>

【讨论】：

$= 有什么作用？我没有看到它在任何地方解释。看来我在这种情况下需要它，尽管我见过的其他地方使用了`简单的= 就足够了。
$= 用于绑定到属性（例如：类、样式、href 等），而不是属性：polymer-project.org/1.0/docs/devguide/…

【解决方案2】：

更新 Polymer 1.0

<div class$="[[getClasses(item.completed)]]">

getClasses: function (completed) {
  var classes = 'bottom'
  if(completed) classes += ' completed';
  return classes;
}

即使completed 可以从this.item.completed 内部getClasses() 中读取，将其作为绑定参数传递也很重要。这样，Polymer 会在每次 item.completed 更改时重新评估函数 getClasses(item.completed)。

原始 - 聚合物 0.5

应该是这样的

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

有关详细信息，请参阅文档：http://polymer-project.org/docs/polymer/expressions.html#tokenlist

【讨论】：

【解决方案3】：

最简单的方法：

<template>
  <style is="custom-style">
      .item-completed-true { background: red; }
  </style>
  <div class$="bottom item-completed-[[item.completed]]"></div>
</template>

【讨论】：