químicos - Polymer 1.0-Clases de enlace css

tipos de enlaces quimicos

Question

Estoy tratando de incluir clases basadas en los parámetros de un json, así que si tengo el color de propiedad, $ = hace que el truco se pase como atributo de clase (según la documentation polímero)

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

El problema es cuando intento agregar esa clase a lo largo de un conjunto de clases existente, por ejemplo:

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

En ese caso $ = no hace el truco. ¿Hay alguna forma de lograr esto o cada vez que agregué una clase condicionalmente tengo que incluir el resto de los estilos a través de selectores css en lugar de clases? Sé que en este ejemplo, tal vez el color podría simplemente ir en el atributo de estilo, es simplemente un ejemplo para ilustrar el problema.

Tenga en cuenta que esto es un problema solo en Polymer 1.0.

Answer 1

Actualizar

A partir de Polymer 1.2.0 , ahora puede utilizar enlaces compuestos para

combina literales de cadena y enlaces en un enlace de propiedad única o enlace de contenido de texto

al igual que:

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

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

y tu ejemplo

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

así que esto ya no es un problema .

La siguiente respuesta ahora solo es relevante para versiones de polímero anteriores a 1.2

Si está haciendo esto mucho, hasta que esta característica esté disponible, se espera que soon pueda definir la función en un solo lugar como una propiedad de Polymer.Base que tiene todas sus propiedades heredadas por todos los elementos poliméricos.

//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, '''');}

y luego llamalo asi

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

luego, cuando sea introducido correctamente por el polímero, simplemente elimine esa línea y reemplace

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

con

avatar {{color}}

Lo uso mucho en este momento, no solo para combinar clases en una, sino también para nombres de rutas, unir con ''/'' y solo contenido de texto general, así que en lugar de eso uso el primer argumento como pegamento.

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

o si puedes usar características de es6 como argumentos de reposo

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

por hacer cosas como

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

de sólo lo básico

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

Answer 2

A partir de Polymer 1.0, la interpolación de cadenas aún no es compatible (pronto será como se menciona en la hoja de ruta). Sin embargo, también puede hacer esto con los enlaces calculados. Ejemplo

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

Editar:

A partir del Polímero 1.2, puede utilizar la unión de compuestos. Asi que

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

ahora trabaja.

Answer 3

        <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 : "");
    },