有条件地在聚合物中添加css类 [英] Conditionally add css class in polymer

问题描述

 < div class =底部{{已完成：item.completed}}> 
  

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

但是，我有以下错误：

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

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

解决方案

update Polymer 1.0

 < div class $ ={{getClasses（item.completed）}}> 
  

  getClasses：function完成）{
 var classes ='bottom'
 if（completed）classes + ='completed'; 
返回类; 
} 
  

即使完成可以从 this.item.completed 中读取 getClasses（）将其作为参数传递给绑定。这样，每次 item.completed 更改时，Polymer将重新评估 getClasses（item.completed）的功能。

original - Polymer 0.5

应该看起来像

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

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

I have an element inside a polymer component and want to add a css class conditionally.

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

if item.isCompleted is true, then add the .completed class.

However, I've got the following error:

Invalid expression syntax: completed?: item.completed

I don't want to put the hole subtree inside a template conditional. Is it possible to do using an expression inside an html tag? I'm using the last polymer release, is this funtionallity migrated or replaced in any way?

解决方案

update Polymer 1.0

<div class$="{{getClasses(item.completed)}}">

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

Even when completed could be read from this.item.completed inside getClasses() it's important to pass it as parameter from the binding. This way Polymer re-evaluates the function getClasses(item.completed) each time item.completed changed.

original - Polymer 0.5

It should look like

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

See docs for more details: http://polymer-project.org/docs/polymer/expressions.html#tokenlist

这篇关于有条件地在聚合物中添加css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！