Polymer 요소 내부에서 외부 스크립트 사용

Question

Polymer 요소 내부에서 외부 JavaScript를 "요구하는"권장 방법은 무엇입니까? 예를 들어, 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> 

을하지만, 그 슬릭에 의해 구동, 회전 목마에 표시 할, 그래서 나는 다음과 마주 무언가를 상상 해요 :

<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 : 내가 3 일 슬릭 요구에 포함 된 "요소/매끄러운 import.html"파일 생성 : 내 요소/비디오 group.html 요소에서

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

을, 나는 그것을 참조 그런는 : ... ...

나는 페이지가 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에서 사업부 번호 회전 목마는 "매끄러운 초기화"와 "매끄러운 슬라이더 '의 클래스가 어떻게

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

주의 : 크롬 DevTools로는 다음과 같은 마크 업을 보여줍니다. 이것은 내 Slick Carousel이 제 div # carrousel 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

매끄러운 작동 방식에 대한 구체적인 내용은 모르지만 제 3 자 라이브러리가로드되도록하려면 해당 스크립트 파일에 대한 가져 오기를 만드는 것이 가장 좋습니다. Similar question was asked over here.