Polymer 1.0 Eigenschaften Bindungsarten in Vorlage Inline

Question

ich so etwas wie dies in Polymer tun möchte ...

<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> 

das heißt dynamisch ein Element Stil eine Eigenschaft.

Ist das möglich? Wenn das so ist, wie?

Answer 1

hat diese Frage auch von mir here

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

kombinieren Stringliterale und Bindungen in einer einzigen Eigenschaft Bindung oder Textinhalt Bindung

verwenden können

wie so:

und Ihr Beispiel

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

so ist dies kein Thema mehr.

Answer 2

In Polymer 1,0 änderten sie etwas, das nicht zulässt Stile wie das Inline. Sie müssen eine berechnete Styles-Funktion verwenden und die gewünschten Werte zurückgeben.

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



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

Hier ist ein weiterer Beitrag zu diesem Thema

Polymer 1.0 - Binding css classes

edit: ich die $

Answer 3

In Polymer 1,0 vergessen haben, müssen Sie Computed Bindings, dies zu tun -

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

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

Sehen Sie dieses plunker als Referenz.

Answer 4

Ja, aber Sie müssen schaffen für die berechnete Bindung:

<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> 

es möglich sein wird, ohne berechnete Bindungen zu tun, wenn https://github.com/Polymer/polymer/issues/2182 aufgelöst wird, die jetzt im Gang zu sein scheint.