Cosa è successo a tokenList styling per Polymer 1.0

Question

In Polymer 0.5, è possibile utilizzare il filtro tokenList con espressioni sull'attributo di classe elements per applicare le classi in modo condizionale in base ai valori dell'oggetto. Qual è la sostituzione v1.0 o tecnica equivalente? Non riesco a trovare nulla sull'argomento oltre a gestirlo interamente in codice.

Answer 1

Polymer 1.0 ha apportato alcuni tagli a favore dei guadagni in termini di prestazioni, essendo le espressioni una di quelle.

Utilizzando l'esempio dalla documentazione 0,5:

<div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList}}"> 

Si potrebbe ri-scrittura per 1.0 in questo modo:

<div class$="{{getClassList(user.selected, user.type)}}"> 

Poi, nel js del vostro elemento:

getClassList: function(selected, type) { 
    var classList = ''; 
    if (selected) classList += ' active'; 
    if (type == 'super') classList += 'big'; 
    return classList; 
} 

Marchio sicuro che tutte le proprietà che sono soggette a modifiche (e che il valore risultante dipende da) siano passate come parametri rs alla funzione. Se queste proprietà vengono aggiornate, il polimero ricalcola il valore. Assicurarsi inoltre che ogni proprietà passata alla funzione venga inizializzata in qualche modo: Polymer non calcolerà la proprietà se qualsiasi argomento è undefined.

Un'altra cosa da considerare è che ogni occorrenza di {{}} deve assumere il contenuto intero attributo o di testo, quindi non è possibile avere le cose come class="foo {{bar}}". Se è necessario aggiungere in modo dichiarativo un nome di classe al vostro elemento, si potrebbe fare qualcosa di simile:

<div class$="{{getClassList('user-item', user.selected, user.type)}}">