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