पॉलिमर तत्व

Question

के अंदर बाहरी स्क्रिप्ट का उपयोग करें पॉलिमर तत्व के अंदर बाहरी जावास्क्रिप्ट को "आवश्यकता" करने का अनुशंसित तरीका क्या है? उदाहरण के लिए, मैं एक वीडियो समूह घटक बना रहा हूं जिसे मैं Slick कैरोसेल के अंदर प्रदर्शित करना चाहता हूं।

उदाहरण के लिए, मेरे कोड इस तरह कस्टम तत्व के लिए दिख सकता है: बल्कि सिर्फ एक iframe के भीतर प्रत्येक वीडियो प्रदर्शित करने के बजाय

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"> 

<polymer-element name="polymer-video-group" constructor="VideoGroupElement" attributes=""> 
    <template> 
    <style> 
     /* styles for the custom element itself - lowest specificity */ 
     :host { 
      display: block; 
      position: relative; 
     } 
     /* 
     style if an ancestor has the different class 
     :host(.different) { } 
     */ 
    </style> 

    <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets) 
     Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing 
     https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml 
    --> 
    <polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp> 

     <template repeat="{{entry in response.feed.entry}}"> 
      <iframe width="420" height="315" src="//www.youtube.com/embed/{{entry.gsx$id.$t}}" frameborder="0" allowfullscreen></iframe> 
     </template> 

    </template> 
    <script> 
    Polymer('polymer-video-group', { 

     // element is fully prepared 
     ready: function(){ 
      this.$.jsonp.go(); 
     }, 

     // instance of the element is created 
     created: function() { 
      this.videos = []; 
      this.response = {}; 
     }, 

     // instance was inserted into the document 
     enteredView: function() { }, 

     // instance was removed from the document 
     leftView: function() { }, 

     // attribute added, removed or updated 
     attributeChanged: function(attrName, oldVal, newVal) { }, 

     // Response from JSONP Data Changed Event Handler 
     responseChanged: function() { 

      // Get the Entry Point for the JSON Feed 
      var entries = this.response.feed.entry; 

      // Create an empty variable to store the video group 
      var videos = []; 

      // Push entries from the JSON feed onto the videos array 
      for (var i = 0, entry; entry = entries[i]; ++i) { 
       videos.push({ 
        name: entry.gsx$name.$t, 
        id: entry.gsx$id.$t 
       }); 
      } 

      // Set the video group object's array to this newly supplied video array 
      this.videos = videos; 
     } 
    }); 
    </script> 
</polymer-element> 

लेकिन,, मैं उन एक हिंडोला में प्रदर्शित करने, स्लिक द्वारा संचालित चाहते हैं, तो मैं कुछ कर की तुलना में एक की तुलना envisioning कर रहा हूँ निम्नलिखित:

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"> 
<script src="../bower_components/slick-carousel/slick/slick.js"></script> 

मुझे लगता है कि चालाक की कार्यक्षमता लपेटता एक कस्टम तत्व बनाने के लिए या मैं सीधे ऊपर के उदाहरण की तरह संपत्ति का उपयोग कर सकते हैं?

अद्यतन: मैं एक "तत्वों/चालाक-import.html" फ़ाइल है कि 3 चीजें स्लिक जरूरतों में शामिल हैं बनाया:

<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"/> 
<script src="../bower_components/jquery/dist/jquery.js"></script> 
<script src="../bower_components/slick-carousel/slick/slick.js"></script> 

मेरी तत्वों/वीडियो-group.html तत्व में, मैं यह के रूप में उल्लेख इस तरह: ... ...

मैं ध्यान दें कि पेज के slick.css फ़ाइल है, लेकिन अन्य 2 js स्लिक फ़ाइलों की आवश्यकता है डोम पृष्ठ लोड होने से जुड़ी नहीं जा रहा है। क्या मैं slick-import.html में शामिल स्क्रिप्ट को सही ढंग से संदर्भित कर रहा हूं?

अद्यतन 2: यहाँ मेरी असली मुद्दा है: मैं इस दोहरा टेम्पलेट है कि वीडियो की सूची है कि मैं अपने jsonp प्रतिक्रिया से निर्माण बाहर प्रिंट:

<div id="carousel"> 
     <template repeat="{{video in videos}}"> 
     <div> 
      <iframe width="420" height="315" src="//www.youtube.com/embed/{{video.id}}" frameborder="0" allowfullscreen></iframe> 
     </div> 
     </template> 
</div> 

लेकिन क्या अप ट्रिपिंग है कि में परिणामी डोम

<video-group> 


    <div id="carousel" class="slick-initialized slick-slider"> 
     <template repeat="{{video in videos}}"></template> 
     <div> 
      <iframe width="420" height="315" src="//www.youtube.com/embed/Fp1wPwszF9M" frameborder="0" allowfullscreen=""></iframe> 
     </div> 

     <div> 
      <iframe width="420" height="315" src="//www.youtube.com/embed/H-l2cq-MXUs" frameborder="0" allowfullscreen=""></iframe> 
     </div> 

    <div class="slick-list draggable" tabindex="0" style="padding: 0px 50px;"><div class="slick-track" style="width: 0px; -webkit-transform: translate3d(-832px, 0px, 0px); opacity: 1;"></div></div></div> 

    <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets) 
     Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing 
     https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml 
    --> 
    <polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&amp;callback=" response="{{response}}"></polymer-jsonp> 

</video-group> 

सूचना कैसे div # हिंडोला की "चालाक-प्रारंभ" और "चालाक-स्लाइडर" एक वर्ग है: Chrome DevTools जैसे मार्कअप को दर्शाता है। इसका मतलब है कि मेरा स्लिक कैरोसेल मेरे div # कैरोसेल डीओएम तत्व पर सही ढंग से अभिनय कर रहा है, लेकिन नीचे घूमने वाले लम्बे समय तक टेम्पलेट टैग की वजह से, यह चल रहा है कि Slick docs में उदाहरण की तरह प्रदर्शन करने के लिए कुछ अच्छे साफ सरल डीआईवी होने से स्लिक हो रहा है :

<div class="your-class"> 
    <div>your content</div> 
    <div>your content</div> 
    <div>your content</div> 
</div> 

वहाँ वैसे भी मैं या तो एक पॉलिमर विशेष विधि के माध्यम से इस समाधान कर सकते हैं या किसी भी तरह स्लिक संशोधित div # हिंडोला नीचे इकलौती संतान divs लक्षित करने के लिए है?

Answer 1

मुझे यह नहीं पता कि कैसे स्लिम काम करता है लेकिन यदि आप चाहते हैं कि आपका तत्व यह सुनिश्चित करने के लिए कि कोई तृतीय पक्ष लाइब्रेरी लोड हो जाए तो शायद उस स्क्रिप्ट फ़ाइल के लिए आयात करना सबसे अच्छा है। Similar question was asked over here।