Polymer 1.0 - Binding css Klassen

Question

Ich versuche, Klassen basierend auf Parametern eines JSON, also wenn ich die Eigenschaft Farbe, die $ = macht den Trick, um es als ein Klassenattribut (basierend auf dem Polymer documentation

)

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

Das Problem ist, wenn ich versuche, diese Klasse entlang einem bestehenden Satzes von Klassen hinzuzufügen, zum Beispiel:

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

In diesem Fall $ = den Trick nicht tun. Gibt es einen Weg, dies zu erreichen oder jedes Mal, wenn ich eine Klasse bedingt hinzufüge, muss ich den Rest der Stile durch CSS-Selektoren anstelle von Klassen einschließen? Ich weiß in diesem Beispiel vielleicht könnte die Farbe einfach in das Stil-Attribut gehen, es ist nur ein Beispiel, um das Problem zu veranschaulichen.

Bitte beachten Sie, dass dies nur in Polymer 1.0 ein Problem ist.

Answer 1

Ab Polymer 1.0 wird String-Interpolation noch nicht unterstützt (es wird bald wie in der Roadmap erwähnt). Sie können dies jedoch auch mit berechneten Bindungen tun. Beispiel

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

Edit:

Ab Polymer 1.2 können Sie Verbindung Bindung verwenden. Also

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

funktioniert jetzt.

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

aktualisieren

Ab Polymer 1.2.0, können Sie jetzt Compound Bindings zu

Stringliterale und Bindungen in einer einzigen Eigenschaft Bindung oder Textinhalt

wie so verbindlich kombinieren :

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

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

und Ihr Beispiel

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

so ist dies kein Thema mehr.

Die folgende Antwort bezieht sich nur auf Polymerversionen vor 1.2

Wenn Sie dies viel tun, bis diese Funktion verfügbar werden, die hoffentlich ist soon Sie nur die Funktion an einem Ort als Eigenschaft Polymer.Base, die alle davon hat definieren könnte seine Eigenschaften von allen Polymerelemente geerbt

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

und rufen dann etwa so:

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

dann, wenn es richtig durch Polymer eingeführt wird, entfernen, dass nur eine Zeile, und ersetzen

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

mit

avatar {{color}} 

ich dieser verwende viel im Moment, nicht nur für die Klassen in eine Kombination, sondern auch Dinge wie Pfadnamen, Verbinden mit einem ‚/‘, und nur allgemeinen Textinhalt, also benutze ich stattdessen das erste Argument als Leim.

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

oder wenn Sie es6 Features wie rest arguments

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

zu tun Sachen wie

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

nur die Grund

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