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

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

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

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

但是，我遇到以下错误:

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

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

最佳答案

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

原始-聚合物0.5

它看起来像

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

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

关于css - 有条件地在 polymer 中添加CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27228515/