폴리머 내의 자바 스크립트

방금 Polymer를 사용하기 시작 했으므로이 요소에 맞춤형 SoundCloud 플레이어를 만들고 싶습니다. 내가 iframe이 올바른 방법을 목표로하고 있지 않다 의미한다폴리머 내의 자바 스크립트

Uncaught Error: SC.Widget function should be given either iframe element or a string specifying id attribute of iframe element.

,하지만 난 (거의 4시간 때문에) 그렇게 할 수있는 또 다른 방법을 생각할 수 없다 : 어떻게 든 나는 다음과 같은 오류가 계속.

= 내 문제는입니다. 왜 var iframe = $(".iframe");은 iframe을 타겟팅하지 않습니다. 나는 Polymer 외부에서 그것을 시험해 보았고 거기에서 잘 작동했다.

차단기 stream.html는 :

<polymer-element name="breaker-stream" attributes="url"> 
    <template> 
    <iframe class="iframe" width="100%" height="450" scrolling="no" frameborder="no" src="{{url}}"></iframe> 
     <script> 
     var iframe = $(".iframe"); 
     var widget = SC.Widget(iframe); 
     </script> 
    </template> 
    <script> 
    Polymer('breaker-stream', { 
     url: "" 
    }); 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="https://w.soundcloud.com/player/api.js"></script> 
</polymer-element>

출처

2014-09-14 mahnouel

당신은 그림자 루트 내부 주 문서에서와 동일한 방식으로 요소에 액세스 할 수 JQuery와 $을 사용할 수 없습니다. 이것은 잘 문서화되어 있으며 검색을 시도하십시오.
<script> 태그를 템플릿에 넣는 것은 좋지 않은 아이디어입니다. element-script를 프로토 타입 객체 (내부)에 넣으십시오.

<script>을 <polymer-element> 안에 넣는 것도 나쁜 생각입니다. 그들은 거기에있을 때 특별한 것을하지 않으며 대신 그 요소 밖에 있어야합니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8> 
<title>Polymer</title> 

    <!-- web components polyfill for non-Chrome --> 
    <script src="//www.polymer-project.org/components/platform/platform.js"></script> 

</head> 
<body> 

    <breaker-stream url="http://api.soundcloud.com/users/1539950/favorites"></breaker-stream> 

    <!-- from here down could be in an import --> 

    <!-- need this to make Polymer elements --> 
    <link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html"> 
    <!-- don't load this twice --> 
    <script src="https://w.soundcloud.com/player/api.js"></script> 

    <polymer-element name="breaker-stream" attributes="url" block> 
    <template> 
    <iframe id="frame" width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url={{url}}"></iframe> 
    </template> 
    <script> 
    Polymer({ 
     url: "", 
     ready: function() { 
     this.widget = SC.Widget(this.$.frame); 
     } 
    }); 
    </script> 
    </polymer-element> 

</body> 
</html>

: 여기

는 동작 예 (http://jsbin.com/xujole/4/edit)는

출처

2014-09-15 01:10:32

폴리머 내의 자바 스크립트

답변

관련 문제