사용자 정의 요소에있는 용지 대화 상자 토글 Polymer

Question

Polymer 및 JavaScript를 사용하여 개발할 때 상당히 새롭고 용지 대화 상자를 토글하는 방식이 가장 좋지 않거나 개선 될 수 있다고 생각합니다. . 나는 사용자 정의 요소를 만들어
오류가 내-대화라는 얻고 있지만 현재 내가 정의 요소의 외부에서 토글() 함수를 호출하려고, 그것은 나를 위해 작동 : 중 하나에서

<dom-module id="my-dialog"> 
    <template> 
    <style> 
     :host { 
     display: inline-block; 
     } 
    </style> 

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay"> 
     <!-- Dialog content --> 
     <h2>Hello World</h2> 
    </paper-dialog> 

    </template> 

    <script> 
    Polymer({ 
     is: 'my-dialog', 

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

을 내 페이지 지금 나는 종이 단추를 클릭 할 때 대화 상자를 열고 닫고 싶다. 잘 작동하지만 위에서 언급했듯이 나는 이것이 내가하는 일을 정말로 전문적이지 않다는 느낌이 든다.

<dom-module id="my-profile-view"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>   
    <my-dialog id="myDialog"></my-dialog> 

    </template> 

    <script> 
    Polymer({ 
     is: 'my-profile-view', 

     //Open dialog 
     toggleDialog: function() { 
     var dialog = this.shadowRoot.querySelector('#myDialog'); 
     var popUp = dialog.shadowRoot.querySelector('paper-dialog'); 
     popUp.toggle(); 
     }, 
    }); 
    </script> 
</dom-module> 

오류 메시지.

(프로그램) : 5 catch되지 않은 형식 오류 : 내 콘솔에서 얻고 널 (null)의 특성 'removeAttribute'(익명 함수를) 읽을 수 없습니다 @ (프로그램) : 5 (익명 함수) @ (프로그램) : 20

누군가 나를 위해 일을 정리할 수 있다면 좋을 것입니다. 그리고 내가 뭘 할 수 있는지 힌트를주세요.

Answer 1

두 번째 요소 my-profile-view은 첫 번째 요소의 내부 논리를 알아야합니다. my-dialog.

대신 대화 상자에 공개 방법 (예 : toggleDialog)이 표시되어야합니다.

내-dialog.html <script>은 :

Polymer({ 
    is: 'my-dialog', 
    toggleDialog: function() { 
    this.$.popUp.toggle() 
    } 
}); 

이 방법은 두 번째 요소에 의해 호출 될 수있다.

내 프로필 - view.html <script> :

Polymer({ 
    is: 'my-profile-view', 
    //Open dialog 
    toggleDialog: function() { 
    this.$.myDialog.toggleDialog() 
    } 
});