web-dev-qa-db-ja.com

条件付きでcssクラスをpolymer

polymerコンポーネント内に要素があり、条件付きでcssクラスを追加したいと思います。

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

item.isCompletedがtrueの場合、.completedクラスを追加します。

ただし、次のエラーが発生します。

無効な式の構文：completed？：item.completed

テンプレート内に穴のサブツリーを条件付きで配置したくありません。 htmlタグ内で式を使用することは可能ですか？私は最後のpolymerリリースを使用していますが、この機能は何らかの方法で移行または置換されていますか？

cssexpressionpolymer
15
Jorge Hernandez

update Polymer 1.0

_<div class$="[[getClasses(item.completed)]]">
_
_getClasses: function (completed) {
  var classes = 'bottom'
  if(completed) classes += ' completed';
  return classes;
}
_

completedがgetClasses()内の_this.item.completed_から読み取れる場合でも、バインディングからパラメーターとして渡すことが重要です。このようにして、Polymerは、_item.completed_が変更されるたびに関数getClasses(item.completed)を再評価します。

オリジナル-Polymer 0.5

次のようになります

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

詳細については、ドキュメントを参照してください： http://polymer-project.org/docs/polymer/expressions.html#tokenlist

13
Günter Zöchbauer

トークンリスト手法は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

18
AlexO

それを行う最も簡単な方法：

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