在Polymer中调用自定义元素/铁页面上的公共方法

Question

在基本Polymer入门工具包的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进行检查。如果是这样，我试图调用公共方法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()