Bir Polimer öğesinin içindeki harici komut dosyalarını kullanma

Question

Bir Polymer öğesinin içinde harici javascript'in "kullanılması" için önerilen yol nedir? Örneğin, bir Slick atlıkarınca içinde görüntülemek istediğim bir video grubu bileşeni yapıyorum.

Örneğin, benim kod özel öğe için aşağıdaki gibi görünebilir: sadece bir iframe içinde her bir videoyu görüntüleyen yerine,

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

Ama o Kaygan tarafından desteklenmektedir, bir atlıkarınca görünmesini istediğiniz, bu yüzden aşağıdaki vis-a-vis şey yapıyor öngören ediyorum:

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

Ben kaygan işlevselliğini sarar bir özel öğesini oluşturmak zorunda yoksa doğrudan yukarıdaki örnekte olduğu gibi öğelerini kullanabilirsiniz mı?

GÜNCELLEME: Ben 3 şey Kaygan ihtiyaçlarını içeren bir "öğeleri/kaygan-import.html" dosyasını oluşturdu: my elemanları/video group.html eleman olarak

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

, ben ona başvuru böyle: ... ...

Ben sayfanın slick.css dosyasını içeren fark, ancak diğer 2 js DOM sayfa yüklendiğinde bağlı edilmiyor gerektirir Kaygan dosyaları. Sunulan komut dosyalarını slick-import.html dosyasında doğru olarak mı gönderiyor?

GÜNCELLEME 2: İşte benim asıl mesele var: Ben benim jsonp yanıtından inşa Video listesini yazdırır bu yinelenen şablonu:

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

Ama ne kadar açma edilir olduğunu çıkan DOM içinde div # atlıkarınca "kaygan-başlatıldı" ve "kaygan-kaydırıcı" bir sınıfa sahip nasıl

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

Bildirimi: Chrome Geliştirme Araçları gibi işaretlemeyi gösterir. Bu, Slick Carousel'imin div # carousel DOM öğesinde düzgün bir şekilde hareket ettiği anlamına gelir, ancak bunun altında kalan kalıcı şablon etiketinden dolayı, Slick'in bazı güzel temiz basit DIV'lere sahip olmasını engellemesi, örneğin Slick docs örneğinde olduğu gibi :

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

Ben Polimer özgü yöntemiyle ya bu geçici çözüm ya da bir şekilde Slick değiştirmek div # atlıkarınca altında tek çocuk div'leri hedef yine de var mı?

Answer 1

Kayganlığın nasıl çalıştığının ayrıntılarını bilmiyorum, ancak öğenizin bir üçüncü taraf kitaplığının yüklenmesini sağlamasını istiyorsanız, bu komut dosyası için içe aktarma oluşturmak muhtemelen en iyisidir. Similar question was asked over here.