Polymer : 다른 스크립트에서 동적 사용자 정의 요소의 메서드 호출

Question

동적 사용자 정의 요소의 메서드를 호출하려고합니다. 사용자 정의 요소의 html 파일의 script 태그 내에서 호출이 수행되는 경우에만 작동합니다. 하지만 다른 custom 요소의 script 태그 나 index.html의 script 태그에서 호출이 발생하면 오류가 발생합니다. 'method-name'은 콘솔의 함수가 아닙니다. 귀하의 회신에 감사드립니다. 컨텍스트의 경우 여기에 스 니펫이 있습니다.

 // in my custom element html file 
     .... 

     <script type="text/javascript"> 

      Polymer({ 
      is: "my-new-view", 

      toggleContent: function() { 
       this.$.collapse.toggle(); 
       }, 

      insertContent: function (userContent) { 
      console.log("inserting userContent..."); 

      } 

     }); 
     </script> 
     </dom-module> 
    </html> 


    Now in another file my-app.html 
    ... 
    <link rel="import" href="my-new-view.html"> 
    ... 
    <dom-module is="my-app"> 
     ... 
     <script> 
     ... 
     // i want to test my-new-view. insertContent() here. 
     var dynamicView = document.createElement('my-new-view'); 
     // in the following line i get the error insertContent is 
     // not a function  
     dynamicView.insertContent();  
     </script> 
    </dom-module> 

pls help. 내가 도대체 ​​뭘 잘못하고있는 겁니까. 내 index.html뿐만 아니라 자바 스크립트의 마지막 2 줄을 시도했지만 같은 오류가 발생합니다. 감사.

Answer 1

아마도 요소가 아직 등록되지 않았을 때 너무 일찍 호출하려고하는 것 같습니다.

는 index.html에서 당신은 당신이 my-app 요소의 내부가 아니라 직접보다 스크립트 코드를 이동할 수있는 다른 폴리머 요소에서 WebComponentsReady 이벤트

window.addEventListener('WebComponentsReady', function(e) { 
    document.createElement('my-new-view').insertContent(); 
}); 

의 핸들러에서 당신의 코드를 포장 할 수 있습니다.

또한 사용자 정의 요소를 사용할 수 있는지 확인하려면 document.createElement('my-new-view').constructor을 확인하십시오. Chrome에 function HTMLElement() { [native code] }이라고 표시되어 있으면 사용할 수 없음을 나타냅니다 (일반적으로 가져 오기가 누락 됨).