Warunkowo dodaj klasę css w polimerze

Question

Mam element wewnątrz komponentu polimerowego i chcę dodać klasę css warunkowo.

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

jeśli item.isCompleted ma wartość true, następnie dodaj klasę .completed.

Jednak mam następujący błąd:

nieprawidłowej składni wyrażeń: zakończony ?: item.completed

nie chcę umieścić poddrzewa otwór wewnątrz szablonu warunkowego. Czy można użyć wyrażenia wewnątrz znacznika html? Używam ostatniej wersji polimeru, czy ta funtionalność migrowała lub zastępowała w jakikolwiek sposób?

Answer 1

aktualizacja Polymer 1,0

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

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

Nawet gdy completed można odczytać z this.item.completed wewnątrz getClasses() ważne jest, aby przekazać go jako parametr z wiązania. W ten sposób Polimer ponownie ocenia funkcję getClasses(item.completed) przy każdej zmianie.

oryginalny - Polymer 0,5

To powinno wyglądać

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

Zobacz docs więcej szczegółów: http://polymer-project.org/docs/polymer/expressions.html#tokenlist

Answer 2

Technika tokenlist była ważna w Polymer 0.5, ale została zaniechana.

Jak Polimerowych 1.2, następujące prace:

<dom-module ...> 
    <template> 
    <div class$="bottom {{conditionalClass(item.completed)}}"></div> 
    </template> 
    <script> 
    Polymer({ 
     ... 
     conditionalClass: function(completed) { 
     return completed ? 'completed' : ''; 
     } 
    }); 
    <script> 
</dom-module> 

zobaczyć podobne pytanie: Polymer 1.0 - Binding css classes

Answer 3

najprostszym sposobem, aby to zrobić:

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