Question

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

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

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

但是，我遇到以下错误：

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

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

Answer 1

令牌列表技术在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

Answer 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()，也必须将其作为参数从绑定中传递出来。这样，每次getClasses(item.completed)更改时，Polymer都会重新评估函数item.completed。

原始 - 聚合物0.5

应该看起来像

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

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

Answer 3

最简单的方法：

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

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

3 个答案: