पॉलिमर और requjs के साथ काम

Question

आवश्यकता वाले मॉड्यूल का उपयोग करने वाले बहुलक तत्व बनाने के प्रयास में मैं issue को अवरुद्ध कर रहा था। मैं समझता हूं कि बहुलक को requjs के साथ काम करने के लिए डिज़ाइन नहीं किया गया है, लेकिन समय के लिए यह मेरा एकमात्र विकल्प है।

• requirejs का उपयोग करें और अपने मॉड्यूल एचटीएमएल आयात के साथ संगत बनाने नहीं है:

  जवाब के लिए सर्च कर रहे हैं मैं दो समाधान मिल गया।

• requirejs कॉलबैक अंदर Polymer() कॉल रखो के रूप में वर्णित here

जब से मैं का उपयोग करने की आवश्यकता होती है, कम से कम कुछ समय के लिए है, मैं समाधान .2 के साथ चला गया। हालांकि, यह पता चला है कि समाधान तत्व पंजीकरण की असीमित विलंब और incorrect data binding prior to Polymer upgrading the element का कारण बनता है।

इस मुद्दे में गहराई से खोदने के बाद, मैंने पॉलिमर को पूरी तरह से रोकने की मंशा के साथ अनियंत्रित पॉलिमर आंतरिक को हैकिंग शुरू कर दी जब तक कि इसकी आवश्यकता होती है। यहां मैं यह आया हूं:

Polymer.require = function(tag, deps, func) { 
    var stopper = {} 
    Polymer.queue.wait(stopper); 
    require(deps, function() { 
     delete stopper.__queue; 
     Polymer.queue.check(); 
     Polymer(tag, func.apply(this, arguments)); 
    }); 
}; 

मुझे पता है कि यह बहुत गलत है। क्या कोई बेहतर समाधान है?

Answer 1

मुझे पता चला कि यदि मैं पॉलिमर स्क्रिप्ट के भीतर कॉल करने के लिए कॉल एम्बेड करता हूं तो मैं इस समस्या से बचता हूं।

<link rel="import" href="../polymer/polymer.html"/> 
<script src="../requirejs/require.js"></script> 
<script src="../something/something.js"></script> 

<polymer-element name="some-component"> 
    <template>...</template> 
    <script> 
    (function() { 
     Polymer('some-component', { 
      someMethod: function() { 

       require(['something'], function (Something) { 
        var something = new Something(); 
        ... 
       } 
     } 
    )(); 
    </script> 
</polymer-element> 

Answer 2

तो वहाँ this solution स्कॉट मीलों से है, लेकिन मैं यह थोड़ा सरलीकृत और अनम्य लगता है के रूप में यह पर निर्भर करता है:

• <script> टैग क्रम में निष्पादित किया जाना है, इसलिए सत्तारूढ़ बाहर:
  • async स्क्रिप्ट टैग
  • xhr आधारित स्क्रिप्ट लोडिंग
• polymer एक <script> टैग से लोड हो रही है, इसलिए:
  • layout.html और css जुड़े लोड नहीं किया जा जाएगा
  • भविष्य के किसी भी कॉल polymer.htmlwon't be deduped

करने के लिए आप और अधिक चाहते हैं अपने बूटस्ट्रैपिंग तर्क पर नियंत्रण आपको अपने घटकों के बीच कुछ सिंक्रनाइज़ेशन को लागू करने की आवश्यकता होगी (जो कि requirejs और polymer दोनों करने के लिए प्रतिस्पर्धा कर रहे हैं) उनसे पहले पूरी तरह से लोड हो चुके हैं।

पिछले उदाहरण एक और घोषणात्मक है (polymer पढ़ें) चीजों को करने का तरीका है लेकिन ठीक दागदार ट्यूनिंग से कम पड़ता है। को यह दिखाने के लिए कि आप अपने लोड ऑर्डरिंग को पूरी तरह से कस्टमाइज़ कैसे कर सकते हैं, एक और अनिवार्य दृष्टिकोण का उपयोग करके requirejs को बाकी बूटस्ट्रैपिंग को ऑर्केस्ट्रेट करने की प्राथमिकता दी गई है।

लेखन के समय, यह अतिरिक्त नियंत्रण खराब प्रदर्शन की कीमत पर आता है क्योंकि विभिन्न स्क्रिप्ट समानांतर में लोड नहीं की जा सकती हैं लेकिन मैं अभी भी इसे अनुकूलित करने पर काम कर रहा हूं।