점화 폴리머 함수

Question

버튼을 클릭 할 때 다른 HTML에서 함수를 실행하려고합니다. 이 같은 모양의 버튼을

나의 첫번째 HTML은 :

<template> 
<paper-icon-button on-tap="_deleteConfigUsage"></paper-icon-button> 
</template> 

<script> 
Polymer({ 
is: "HTML1", 
_deleteConfigUsage: function(e){ 
this.fire('refreshUsagesRequest'); 
} 
}) 
</script> 

내 두 번째 HTML은 다음과 같습니다

<script> 
Polymer({ 
is: "HTML2", 
listeners:{ 
'refreshUsagesRequest': '_generateUsagesRequest' 
}, 
_generateUsagesRequest: function(e){ 
document.getElementById("getConfigurationUsagesRequest").generateRequest(); 
} 
}) 
</script> 

이 전달에 관여하는 3 개 HTML 파일이 있습니다. 첫 번째 HTML, 두 번째 HTML 및 둘 다 호출하는 HTML보기.

아이콘을 클릭하면 두 번째 HTML의 기능이 실행되고 있지 않습니다. 청중 내에서 모든 것을 올바르게 했습니까? 첫 번째 기능이 이벤트 여야합니까?

모든 도움 주셔서 감사합니다.

Answer 1

고객 정보 요소는 적어도 두 단어 이상이어야합니다. 위에 설명 된 Nicholas와 같이 x-htm1 및 x-html2과 같이 하이픈이어야합니다. 그럴 경우. 중합체 1.x 또는 2.x 때문에이 화재 기능에는 차이가 있습니다. 귀하의 경우에는 1.x 버전을 사용합니다. 그래서, 다른 요소 기능을 발사하는 주요 목표. 이것은 또 다른 질문보다 x-html2는 x-html1의 자식 요소 인 경우 : 당신이 ID 이름을 지정해야하며, 두 요소가 주 문서의 하위 경우 당신은 그러나

this.$.html2._generateUsagesRequest(); //html2 is id name of x-html2.html 

와 자식 요소의 함수를 호출 할 수 있습니다 (그것은 솔기. 당신의 예제 에서처럼) 하나의 자식 요소에서 다른 자식 요소의 함수로 호출 할 수있는 것보다 :

x-main.html;

<x-html1 id="html1" on-refresh-usages-request='m_generateUsagesRequest'></x-html1> 
<x-html2 id="html2"></x-html2> 

Polymer({ 
is: "x-main", 
m_generateUsagesRequest(){ 
    this.$.html2._generateUsagesRequest(); 
} 

x-html1.html;

<template> 
<paper-icon-button on-tap="_deleteConfigUsage"></paper-icon-button> 
</template 
<script> 
    Polymer({ 
    is: "x-html1", 

    _deleteConfigUsage(e){ // let say u need to fires x-html2.html's function 
     this.fire('refresh-usages-request'); 

    } 
    }) 
    </script> 

(x-html2);

<script> 
Polymer({ 
is: "x-html2", 

_generateUsagesRequest(e){ 
    // Do something as this functions fires from x-html1 

} 
}) 
</script>