Domanda Aggiungi in modo condizionale classe css in polimero


Ho un elemento all'interno di un componente polimerico e voglio aggiungere una classe CSS in modo condizionale.

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

se item.isCompleted è true, quindi aggiungi la classe .completed.

Tuttavia, ho il seguente errore:

Sintassi di espressioni non valide: completata ?: item.completed

Non voglio mettere la sottostruttura del foro all'interno di un modello condizionale. È possibile usare un'espressione all'interno di un tag html? Sto usando l'ultima versione in polimero, questa funzionalità è stata migrata o sostituita in qualche modo?


12
2017-12-01 12:32


origine


risposte:


aggiorna Polymer 1.0

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

Anche quando completed potrebbe essere letto da this.item.completed dentro getClasses() è importante passarlo come parametro dall'associazione. In questo modo Polymer rivaluta la funzione getClasses(item.completed) ogni volta item.completed cambiato.

originale - Polimero 0,5

Dovrebbe assomigliare

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

Vedi i documenti per maggiori dettagli: http://polymer-project.org/docs/polymer/expressions.html#tokenlist


10
2017-12-01 14:53



La tecnica tokenlist era valida in Polymer 0.5, ma è stata deprecata.

A partire da Polymer 1.2, i seguenti lavori:

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

Vedi anche una domanda simile: Polymer 1.0 - Classi css vincolanti


17
2018-01-03 07:53



il modo più semplice per farlo:

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

2
2018-06-20 12:28