पॉलिमर वैश्विक चर

Question

मैं एक पॉलिमर ऐप पर काम कर रहा हूं, जो एक विश्वसनीय API से डेटा खींच रहा है और इंटरफ़ेस बनाने के लिए इसका उपयोग कर रहा है। अवधारणा पर अटक गया एक विशिष्ट क्षेत्र http://www.polymer-project.org/docs/polymer/polymer.html#global पर वर्णित मोनोस्टेट पैटर्न का कार्यान्वयन है। प्रभावी रूप से, मैं घोषणात्मक विशेषताओं को एक नए घटक, ऐप-ग्लोबल्स में जोड़ सकता हूं, और फिर इस उचित रूप से सीधे पहुंच सकता हूं।

यहां मुख्य प्रश्न है: यदि मैं एप-ग्लोबल्स घटक के भीतर एपीआई में कोर-एजेक्स के माध्यम से डेटा को आगे और आगे खींच रहा हूं, तो मैं कैसे सुनिश्चित करूं कि ऐप- globals घटक एक ही डेटा है? लगता है कि अगर मैं सुझाव दिया पैटर्न का उपयोग की तरह मैं अपने monostatism खो दिया है:

<polymer-element name="my-component"> 
    <template> 
    <app-globals id="globals"></app-globals> 
    <div id="firstname"></div> 
    <div id="lastname"></div> 
    </template> 
    <script> 
    Polymer('my-component', { 
     ready: function() { this.globals = this.$.globals; } 
    }); 
    </script> 
</polymer-element>  

घटक है कि उपभोग एप्लिकेशन-वैश्विक एपीआई डेटा के अपने स्वयं के संस्करण खींच लिया जाएगा के प्रत्येक क्योंकि। क्या मैं कुछ भूल रहा हूँ? क्या यह सुनिश्चित करने का एक और तरीका है कि ऐप में लगातार सत्य का केवल एक संस्करण है?

Answer 1

प्रत्येक बार जब आप एक कस्टम घटक में ऐप-ग्लोबल्स का संदर्भ देते हैं, तो ऐप-ग्लोबल्स का एक नया उदाहरण बनाया जाता है। लेकिन इनमें से प्रत्येक उदाहरण कई गुणों को साझा कर सकता है (ओबीजेसी/स्विफ्ट में जावा या "क्लास" वर्र्स में "स्थैतिक" युद्धों को सोचें)।

ऐप-ग्लोबल्स तत्व (या वास्तव में कोई भी पॉलिमर तत्व) के भीतर स्क्रिप्ट केवल एक बार चलता है - घटक परिभाषा लोड होने पर इसे चलाने के रूप में सोचें। लेकिन उस स्क्रिप्ट के भीतर पॉलिमर फ़ंक्शन एक कॉन्फ़िगरेशन ऑब्जेक्ट की घोषणा करता है, जिसमें गुण और जीवन चक्र ईवेंट-हैंडलर हैं, जिन्हें प्रत्येक इंस्टेंस के लिए अलग से बनाया जाएगा। आपके द्वारा संदर्भित दस्तावेज़ में ऐप-ग्लोबल्स स्क्रिप्ट (अद्यतन के नीचे प्रतिलिपि बनाई गई है: इस संस्करण को बाद में वर्णित के रूप में संशोधित किया गया है) एक अनाम बंद (एक फ़ंक्शन जो तुरंत चलाया जाता है) का उपयोग करता है, जिसमें साझा चर और पॉलीमर फ़ंक्शन दोनों कॉन्फ़िगर ऑब्जेक्ट को घोषित करते हैं बदले में साझा चर संदर्भित करता है। तो उस कॉन्फ़िगरेशन ऑब्जेक्ट का प्रत्येक उदाहरण - और बदले में ऐप-ग्लोबल्स के प्रत्येक उदाहरण - साझा चर के उसी सेट को संदर्भित करेगा।

<polymer-element name="app-globals"> 
    <script> 
    (function() { 
    var data = { 
     firstName: 'John', 
     lastName: 'Smith' 
    } 

    Polymer('app-globals', { 
     ready: function() { 
     this.data = data; 
     } 
    }); 
    })(); 
    </script> 
</polymer-element> 

एक कस्टम घटक उदाहरण, अपना एप्लिकेशन-वैश्विक उदाहरण पर एक मूल्य बदलता है (या वे अपने मामले में एक AJAX कॉल के परिणाम के रूप में आंतरिक रूप से बदल रहे हैं,) सभी एप्लिकेशन के लिए एक संदर्भ के साथ अन्य घटक उदाहरणों -ग्लोबल्स बदले गए मूल्य को देखेंगे।

अद्यतन: मूल, के रूप में से नकल के रूप @zreptil द्वारा वर्णित

http://www.polymer-project.org/docs/polymer/polymer.html#global

, एक कमी थी, यदि आप डेटा मान बदलते हैं, नए मूल्यों सभी अन्य मामलों के लिए उपलब्ध नहीं हैं - क्योंकि आवृत्ति चर केवल संदर्भित तारों की प्रतियां हैं। डेटा गुणों के साथ किसी ऑब्जेक्ट का उपयोग करके, ऊपर दिए गए संस्करण में, और ऑब्जेक्ट को ओवरराइट करने के बजाए उस ऑब्जेक्ट के डेटा गुणों को केवल पढ़ने और असाइन करने के बाद, बदले गए मान उदाहरणों के बीच साझा किए जा सकते हैं।

Answer 2

@Zreptil ने उपरोक्त उदाहरण के लिए कहा है, और चूंकि मुझे इसके साथ प्रयोग करना पड़ा, फिर भी मैंने टिम स्टीवर्ट के उत्तर और पॉलिमर दस्तावेज़ों के आधार पर एक बनाया।

संपूर्ण उदाहरण: http://jsbin.com/figizaxihe/1/edit?html,output

मैं आईडी (id="global-variable") में डैश के साथ कुछ मुसीबतों था तो मैं भी उस के लिए एक उदाहरण गयी।

तत्व परिभाषा

<polymer-element name="app-globals"> 
<script> 
    (function() { 
    var data = { 
     firstName: 'John' 
    } 

    Polymer({ 
     ready: function() { 
     this.data = data; 
     } 
    }); 
    })(); 

</script> 
</polymer-element> 

एक बहुलक तत्व के अंदर इसका इस्तेमाल

<polymer-element name="output-element" noscript> 
<template> 
    <app-globals id="globalvars"></app-globals> 
    <h4>Output-Element</h4> 
    <div>First Name: {{$.globalvars.data.firstName}}</div> 
</template> 
</polymer-element> 

एक बहुलक तत्व

<template is="auto-binding"> 
    <app-globals id="topglobals"></app-globals> 
    <h3>First Name in Title: {{$.topglobals.data.firstName}}</h3> 
</template> 

बाहर इसका इस्तेमाल डैश/हाइफ़न के साथ

वेतन ध्यान

<h3>and since that took me a while to realize - dashes are not directly supported...</h3> 
<template is="auto-binding"> 
    <!-- can use different id's --> 
    <app-globals id="global-variables"></app-globals> 
    <div>This does not work: {{$.global-variables.data.firstName}}</div> 
    <div>Correct syntax: {{$['global-variables'].data.firstName}}</div> 

</template> 

पॉलिमर 1,0

एक बहुलक 1.0 समाधान अगर दिलचस्पी के लिए Polymer 1.0 Global Variables देखें।