在Polymer中的自定義元素/鐵頁上調用公共方法

Question

在基本的Polymer入門工具包的my-app文件中調用公共方法可以解決TypeError。 以下是我以前使用公共方法的示例。 但是，當我嘗試在my-app文件的Iron-pages中的自定義元素上調用方法時，以下代碼無法正常工作。

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

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

下面的簡化代碼創建錯誤。 我正在檢查attributeChanged是否選擇了my-singlevideo頁面。 如果是這樣，我試圖調用公共方法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' )

然后在其上調用public方法：

comp.changeContent()