पॉलिमर में छिपे हुए विशेषता 1.0

Question

मैं 0.4-0.5 युग के बाद से पॉलिमर इस्तेमाल नहीं किया है और इसलिए <my-element hidden="{{foo != bar}}"></my-element>

अब

पॉलिमर 1.0 मैं देख रहा हूँ में एक विधि से गणना मूल्यों का उपयोग करने के लिए है कि तरह छिपा विशेषता का उपयोग करने के लिए इस्तेमाल कर रहा हूँ किसी भी चीज के लिए जो सीधे बुलियन मूल्य नहीं है। मैं इस तरह मेरे कोड है:

<my-element hidden="{{_computeHidden()}}"></my-element>

और फिर स्क्रिप्ट खंड में:

Polymer({ 
    is: 'super-element', 
    properties: {...}, 
    _computeHidden: function(){ 
     console.log('its being called, mkay'); 
     return !(foo == bar); 
    } 
}); 

अब कंसोल में

संदेश दो बार पृष्ठ ताज़ा के बाद आता है, लेकिन जब foo परिवर्तन का मूल्य , तत्व गायब नहीं होता है। मैं क्या गलत कर रहा हूं?

Answer 1

यदि आप foo परिवर्तनों के दौरान अपने फ़ंक्शन के पुनर्मूल्यांकन को ट्रिगर करना चाहते हैं, तो आपको यह सुनिश्चित करना होगा कि foo संपत्ति है और इसे एक तर्क के रूप में फ़ंक्शन में पास कर दें। यहां एक छोटा सा उदाहरण है।

<dom-module id="register-me"> 
    <template> 
     <div hidden$="{{compute(ishidden)}}">Hello from my local DOM</div> 
     <button on-click="toggle">Toggle Hidden</button> 
    </template> 
    <script> 
     Polymer({is: "register-me", 
      properties: { ishidden: { 
       type: Boolean, 
       value: false 
      } }, 
      compute: function() { 
       console.log("computing..."); 
       return this.ishidden; 
      }, 
      toggle: function() { 
       this.ishidden = !this.ishidden; 
      } 
     }); 
    </script> 
</dom-module> 

ध्यान दें कि गुण के लिए बाध्य करने के लिए, आप $= उपयोग करना चाहिए।

Answer 2

तो, दो मुद्दे हैं। मारिया के नोट्स के रूप में, आपको अपने _computeHidden पैरामीटर से जुड़ी विधि है जो पॉलिमर अधिसूचनाओं का जवाब देगी। इसलिए, foo और bar दोनों तत्वों पर गुणों के रूप में घोषित किए जाने चाहिए।

एक और मुद्दा यह है कि "छुपा" boolean attribute है, जिसका अर्थ है कि इसकी उपस्थिति इंगित करती है कि तत्व छिपाना चाहिए। पॉलिमर 1.0 में, $ का उपयोग hidden$= में एक संपत्ति बाध्यकारी में छिपा हुआ परिवर्तन और स्ट्रिंग को संभालेगा। $ के बिना, hidden= केवल कच्चे बूलियन का मूल्यांकन करेगा। hidden देशी एचटीएमएल विशेषताओं में आवश्यक $ के लिए सूची में नहीं है, इसलिए विकल्प आपके ऊपर है।

Polymer({ 
    is: 'my-element', 
    properties: { 
     foo: Boolean, 
     bar: Boolean 
    }, 
    _computeHidden: function(){ 
     return !(this.foo == this.bar); 
    } 
}); 

<my-element hidden$="{{_computeHidden(foo, bar)}}"></my-element> 

इस annotated attribute binding के साथ, "छिपा" तत्व पर तभी दिखाई देगी जब अपने परिकलित मान जो व्यवहार आप चाहते है, truthy है। एक सरल "=" बाइंडिंग के साथ, "छुपा" दिखाई देगा भले ही आपका फ़ंक्शन सत्य, या शून्य, या कोई अन्य मान लौटाए।