在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()