ポリマーのカスタム要素/鉄ページのパブリックメソッドの呼び出し

Question

基本ポリマーのスターターキットのmy-appファイル内のパブリックメソッドの呼び出しは、TypeErrorで解決されます。 以下は、パブリックメソッドを使用して私がどのように悩まされたかの例です。しかし、my-appファイルのアイアンページ内のカスタム要素のメソッドを呼び出そうとすると、以下のコードは機能しません。

<!--Script in parent file--> 
<script> 
    toggleDialog: function() { 
    this.$.myDialog.toggleDialog(); 
    } 
</script> 

<!--Script in Child--> 
<script> 
    toggleDialog: function() { 
     this.$.popUp.toggle(); 
    } 
</script> 

次の簡略化されたコードはエラーを作成します。 my-singlevideoページが選択されている場合は、attributeChangedをチェックしています。もしそうなら、私はpublicメソッドcallFunctionを呼び出そうとしています。

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

    <app-location route="{{route}}"></app-location> 
    <app-route 
    route="{{route}}" 
    pattern="/:page" 
    data="{{routeData}}" 
    tail="{{subroute}}"></app-route> 

    <iron-pages 
    selected="[[page]]" 
    attr-for-selected="name" 
    fallback-selection="404" 
    role="main"> 
     <my-dashboard name="dashboard"></my-dashboard> 
     <my-profile name="profile"></my-profile> 
     <my-singlevideo name="singlevideo" id="singlevideo"></my-singlevideo> 
    </iron-pages> 

    </template> 

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

     properties: { 
     page: { 
      type: String, 
      reflectToAttribute: true, 
      observer: '_pageChanged' 
     }, 
     }, 

     observers: [ 
     '_routePageChanged(routeData.page)' 
     ], 

     _pageChanged: function(page) { 
     // Load page import on demand. Show 404 page if fails 
     var resolvedPageUrl = this.resolveUrl('my-' + page + '.html'); 
     this.importHref(resolvedPageUrl, null, this._showPage404, true); 
     }, 

     _routePageChanged: function(page) { 
     this.page = page || 'dashboard'; 
     }, 

     attributeChanged: function(name, type) {  
     if(this.getAttribute(name) == 'singlevideo') { 
      this.$.singlevideo.callFunction(); 
     } 
     }, 

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

Answer 1

あなたは（<my-student-search>）に到達するページがメインドキュメント内で一意である場合は、カスタム要素を取得するための標準的なdocument.querySelector()メソッドを使用することができます。

var comp = document.querySelector('my-student-search') 

代わりに、あなたはそれを照会することができますそのIDによって：

var comp = document.querySelector('my-student-search#theId') 

その後のパブリックメソッドを呼び出します。

comp.changeContent()