Polymer 1.0 - Classi css vincolanti

Question

Sto provando ad includere classi basate su parametri di un json, quindi se ho il colore della proprietà, $ = fa il trucco per passarlo come attributo di classe (basato sul polimero documentation)

<div class$="{{color}}"></div> 

il problema è quando sto cercando di aggiungere che la classe lungo un insieme esistente di classi, per esempio:

<div class$="avatar {{color}}"></div> 

In questo caso $ = non fare il trucco. C'è un modo per realizzare questo o ogni volta che aggiungo una classe in modo condizionale, devo includere il resto degli stili attraverso i selettori di css invece delle classi? So che in questo esempio il colore potrebbe semplicemente andare nell'attributo style, è puramente un esempio per illustrare il problema.

Si prega di notare che questo è un problema solo in Polymer 1.0.

Answer 1

A partire da Polymer 1.0, l'interpolazione delle stringhe non è ancora supportata (sarà presto indicata nella tabella di marcia). Tuttavia, puoi farlo anche con i collegamenti calcolati. Esempio

<dom-module> 
    <template> 
    <div class$="{{classColor(color)}}"></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    ... 
    classColor: function(color) { 
     return 'avatar '+color; 
    } 
    }); 
<script> 

Edit:

A partire dal Polymer 1.2, è possibile utilizzare composto legante. Quindi

<div class$="avatar {{color}}"></div> 

ora funziona.

Answer 2

 <template if="[[icon_img_src]]" is="dom-if"> 
      <img class$="{{echo_class(icon_class)}}" src="[[icon_img_src]]"> 
     </template> 

     <span class$="{{echo_class(icon_class, 'center-center horizontal layout letter')}}" hidden="[[icon_img_src]]">[[icon_text]]</span> 

     <iron-icon icon="check"></iron-icon> 

    </div> 
</template> 

<script> 
Polymer({ 

    echo_class: function(class_A, class_Z) { 
     return class_A + (class_Z ? " " + class_Z : ""); 
    }, 

Answer 3

Aggiornamento

Come di Polymer 1.2.0, è ora possibile utilizzare Compound Bindings per

combinare stringhe letterali e le associazioni in una singola proprietà vincolante o il contenuto del testo vincolante

in questo modo :

<img src$="https://www.example.com/profiles/{{userId}}.jpg"> 

<span>Name: {{lastname}}, {{firstname}}</span> 

e il vostro esempio

<div class$="avatar {{color}}"></div> 

quindi questo non è più un problema.

La seguente risposta è ora pertinente solo per le versioni di polimero precedenti a 1.2

Se si sta facendo questo molto, fino a quando questa caratteristica diventa disponibile che è si spera soon si può solo definire la funzione in un unico luogo come una proprietà di Polymer.Base che ha tutte le sue proprietà ereditate da tutti gli elementi polimerici

//TODO remove this later then polymer has better template and binding features. 
// make sure to find all instances of {{join(in polymer templates to fix them 
Polymer.Base.join = function() { return [].join.call(arguments, '');} 

e poi chiamano così:

<div class$="{{join('avatar', ' ', color)}}"></div> 

poi quando è introdotta da polimero correttamente, è sufficiente rimuovere quella riga e sostituire

{{join('avatar', color)}} 

con

avatar {{color}} 

Io lo uso molto in questo momento, non solo per la combinazione di classi in un unico, ma anche cose come i nomi di percorso, unendo con una, e il contenuto del testo generale '/' solo, quindi, invece, uso il primo argomento come colla.

Polymer.Base.join = function() { 
    var glue = arguments[0]; 
    var strings = [].slice.call(arguments, 1); 
    return [].join.call(strings, glue); 
} 

o se è possibile utilizzare le funzioni di ES6 come rest arguments

Polymer.base.join = (glue, ...strings) => strings.join(glue); 

per fare cose come

<div class$="{{join(' ', 'avatar', color)}}"></div> 
<img src="{{join('/', path, to, image.jpg)}}"> 
<span>{{join(' ', 'hi', name)}}</span> 

della sola base

Polymer.Base.join = (...args) => args.join(''); 
<div class$="{{join('avatar', ' ', color)}}"></div>