Sử dụng tập lệnh bên ngoài bên trong phần tử Polymer

Question

Cách được đề xuất để "yêu cầu" javascript bên ngoài bên trong phần tử Polymer là gì? Ví dụ: tôi đang xây dựng thành phần nhóm video mà tôi muốn hiển thị bên trong băng chuyền Slick.

Ví dụ, mã của tôi có thể trông như thế này cho các phần tử tùy chỉnh:

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

Nhưng, thay vì chỉ hiển thị mỗi video bên trong một iframe, tôi muốn những người xuất hiện trong một băng chuyền, chạy bằng Slick, vì vậy tôi hình dung một cái gì đó làm vis-a-vis như sau:

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

tôi có phải tạo ra một yếu tố tùy chỉnh mà kết thúc tốt đẹp các chức năng của trơn hoặc tôi có thể trực tiếp sử dụng tài sản như ví dụ trên?

UPDATE: Tôi tạo ra một "yếu tố/trơn-import.html" tập tin đó bao gồm 3 điều nhu cầu Slick:

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

Trong các yếu tố của tôi/yếu tố video group.html, tôi tham khảo nó như ví dụ: ... ...

tôi nhận thấy rằng các trang chứa các tập tin slick.css, nhưng file 2 js khác Slick đòi hỏi không được gắn vào DOM khi tải trang. Tôi có tham chiếu các tập lệnh được bao gồm chính xác trong slick-import.html không?

UPDATE 2: Đây là vấn đề thực sự của tôi: Tôi có điều này lặp đi lặp lại mẫu mà in ra danh sách video mà tôi xây dựng từ phản ứng jsonp tôi:

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

Nhưng những gì đang vấp lên là DOM kết quả trong Chrome DevTools hiển thị đánh dấu như vậy:

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

Lưu ý cách băng chuyền div # có lớp "slick-initialized" và "slick-slider". Điều này có nghĩa là Slick Carousel của tôi đang hoạt động đúng trên phần tử div carousel DOM của tôi, nhưng vì thẻ mẫu kéo dài lồng bên dưới, đó là vấp phải Slick từ việc có một số DIV đơn giản để làm sạch, như ví dụ trong số Slick docs minh họa :

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

Liệu có cách nào tôi có thể workaround này, hoặc thông qua một phương pháp Polymer cụ thể hoặc sửa đổi Slick bằng cách nào đó để chỉ nhắm mục tiêu các div con bên dưới div # băng chuyền?

Answer 1

Tôi không biết các chi tiết cụ thể về cách hoạt động trơn tru nhưng nếu bạn muốn yếu tố của mình đảm bảo rằng thư viện của bên thứ ba được tải, có thể là tốt nhất để tạo tệp nhập cho tệp tập lệnh đó. Similar question was asked over here.