Условно добавьте класс css в полимер

У меня есть элемент внутри полимерного компонента и хочу добавить класс css условно.

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

если item.isCompleted - true, затем добавьте класс .completed.

Однако у меня есть следующая ошибка:

Синтаксис недопустимого выражения: завершено?: item.completed

Я не хочу, чтобы поддерево ячеек внутри шаблона было условным. Можно ли использовать выражение внутри тега html? Я использую последний выпуск полимера, это funtionallity мигрировала или заменена каким-либо образом?

Ответ 1

update 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 повторно оценивает функцию getClasses(item.completed) каждый раз, когда изменяется item.completed.

оригинал - полимер 0,5

Он должен выглядеть как

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

Подробнее см. в документах: http://polymer-project.org/docs/polymer/expressions.html#tokenlist

Ответ 2

Метод 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 - Связывание классов css

Ответ 3

самый простой способ сделать это:

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