在Polymer元素中使用外部腳本

Question

推薦的方法是在Polymer元素中「需要」外部JavaScript嗎？例如，我正在構建一個我想要在Slick輪播中顯示的視頻組組件。

例如，我的代碼看起來像這樣的自定義元素：

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

但是，而不是僅僅顯示一個iframe內的每個視頻，我想那些出現在一個旋轉木馬，搭載油滑，所以我設想做一些面對面的人如下：

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

我一定要創建一個包裝華而不實的功能的自定義元素或可我直接用資產像上面的例子？

UPDATE： 我創建了一個「元件/油滑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文件油滑的要求都沒有附着於在頁面加載時的DOM。我是否在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> 

但什麼是絆倒的是，得到的DOM中Chrome的DevTools顯示標記爲這樣：

<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＃轉盤如何有一類的「油滑初始化」和「油滑滑塊」。這意味着我的Slick Carousel正確地對我的div＃carousel DOM元素進行操作，但由於模板標籤嵌套在下面，這使得Slick從一些乾淨的簡單DIV開始行動起來，就像Slick docs演示中的示例：

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

反正是有，我可以解決此，無論是通過聚合物具體方法或修改油滑莫名其妙的目標DIV＃傳送帶下方唯一的孩子的div？

Answer 1

我不知道浮油工作方式的具體細節，但如果您希望您的元素能夠確保第三方庫被加載，那麼最好爲該腳本文件創建一個導入。 Similar question was asked over here。