Polymer 1.0 proprietà vincolante per inline stili in modello

Question

vorrei fare qualcosa di simile in polimero ...

<dom-module id="logo-standard"> 
<style> 
:host { 
    display: block; 
} 
</style> 

<template> 

<div class="logo-wrap"> 

    <div style="width: {{logoWidth}}px;"> 
    Some awesome logo 
    </div> 

</template> 

<script> 

(function() { 

Polymer({ 
    is: 'logo-standard', 

    properties: { 

    logoWidth: { 
     type: String, 
     value: '400' 
    } 
    } 

}); 
})(); 
</script> 
</dom-module> 

vale a dire lo stile dinamicamente un elemento utilizzando una proprietà.

È possibile? Se é cosi, come?

Answer 1

Questa domanda ha ricevuto risposta da me here

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

così:

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

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

e il vostro esempio

<div style$="width: {{logoWidth}}px;"> 

quindi questo non è più un problema.

Answer 2

In Polymer 1.0 hanno modificato qualcosa che non consente di utilizzare stili in linea del genere. Devi usare una funzione di stile calcolata e farla restituire i valori che desideri.

<div style$="{{computeWidth}}"> 



computeWidth: function() { 
    return 'width:' + this.logoWidth + 'px;' 
} 

Ecco un altro post su questo argomento

Polymer 1.0 - Binding css classes

EDIT: Ho dimenticato il $

Answer 3

In Polymer 1.0, sarà necessario Computed Bindings per fare questo -

<div style$="[[_computeWidth(logoWidth)]]"> 
    Some awesome logo 
    </div> 

    _computeWidth: function (width) { 
     return 'width: ' + width + 'px' + ';color:red;'; 
    }, 

Vedere questo plunker come riferimento.

Answer 4

Sì, ma è necessario creare calcolato vincolante per questo:

<dom-module id="logo-standard"> 
    <style> 
     :host { 
      display : block; 
     } 
    </style> 
    <template> 
     <div class="logo-wrap"> 
      <div style$="[[logoStyle(logoWidth)]]"> 
       Some awesome logo 
      </div> 
    </template> 
    <script> 
     Polymer({ 
      is : 'logo-standard', 

      properties : { 

       logoWidth : { 
        type : String, 
        value : '400' 
       } 
      }, 
      logoStyle : function (logoWidth) { 
       return 'width: ' + logoWidth + 'px'; 
      } 
     }); 
    </script> 
</dom-module> 

sarà possibile fare a meno attacchi calcolati quando https://github.com/Polymer/polymer/issues/2182 è risolto, che sembra essere in corso ora.