Wie kann ich eine Klasse mithilfe eines Boolean in einer Polymervorlage umschalten?

Question

Möchten Sie dies erreichen ohne mit einer Hilfsfunktion wie gezeigt here. Ich weiß, dass ich einige grundlegende Operatoren (d. H. !) verwenden kann, möchte aber etwas mehr Logik beim Templating verwenden. Grundsätzlich ist es das Ziel, den über iron-media-query gesetzten booleschen Wert zu verwenden, um eine Klasse auf einem Element umzuschalten.

Pseudo-Code:

<div class$="[[(mobile)?'mobile-styling':null]]"></div> 

P. S. Der Klassenname darf nicht der boolesche Variablenname sein.

Danke

Answer 1

Leider wurde diese Funktion für Leistungsverbesserungen veraltet. Polymer 1.0+ unterstützt nur Folgendes:

1. Ein Eigenschafts- oder Untereigenschaftenpfad (Benutzer, Adresse.Straße).
2. Eine berechnete Bindung (_computeName (firstName, lastName, locale)).
3. Irgendeines der oben genannten, denen der Negationsoperator (!) Vorausgeht.

hier ist ein Beispiel dafür, wie können Sie die Bindung berechnet achieve:

<div class$="mobile-styling--[[mobile]]"></div> 

und:

<dom-module ...> 
    <template> 
    <div class$="[[hasMobileStyle(mobile)]]"></div> 
    </template> 
    <script> 
    Polymer({ 
     ... 
     hasMobileStyle: function(mobile) { 
     return mobile ? 'mobile-styling' : ''; 
     } 
    }); 
    <script> 
</dom-module> 

Sie auch die boolean als Selektor rid der berechneten Bindung erhalten verwenden können Sie würden einen Selektor auf .mobile-styling--true

machen Was Sie fragen, kann nicht getan werden. Nur die drei Bedingungen funktionieren, [[(mobile)?'mobile-styling':null]] entspricht nicht den Kriterien.