पॉलिमर 1.0 बाध्यकारी गुण टेम्पलेट

Question

में शैलियों मैं बहुलक में कुछ इस तरह करना चाहते हैं इनलाइन करने के लिए ...

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

अर्थात गतिशील किसी तत्व की संपत्ति का उपयोग कर शैली।

क्या यह संभव है? यदि हां, तो कैसे?

Answer 1

यह सवाल भी मेरे द्वारा उत्तर दिया गया है here

Polymer 1.2.0 के रूप में, आप अब Compound Bindings

का उपयोग कर सकते केवल एक प्रॉपर्टी में स्ट्रिंग शाब्दिक और बाइंडिंग गठबंधन बंधन या लेख सामग्री

बाध्यकारी

इस तरह:

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

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

और अपने उदाहरण

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

तो यह कोई मुद्दा नहीं रह है।

Answer 2

पॉलिमर 1.0 में उन्होंने कुछ बदल दिया जो आपको इस तरह की शैलियों को इनलाइन करने की अनुमति नहीं देता है। आपको एक संगणित शैलियों के फ़ंक्शन का उपयोग करना होगा और इसे आपके इच्छित मान वापस कर देना होगा।

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



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

यहाँ इस विषय के बारे

Polymer 1.0 - Binding css classes

संपादित एक और पोस्ट है: मैं $

Answer 3

भूल पॉलिमर 1.0 में, आप Computed Bindings की आवश्यकता होगी यह करने के लिए -

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

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

संदर्भ के लिए यह plunker देखें।

Answer 4

हां, लेकिन आप उस के लिए बाध्यकारी अभिकलन बनाने की जरूरत:

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

यह जब https://github.com/Polymer/polymer/issues/2182 जो अब प्रगति में हो रहा है, हल हो गई है अभिकलन बाइंडिंग के बिना ऐसा करना संभव हो जाएगा।