[英]Calling public methods on custom elements/ iron-pages in Polymer
Calling a public method inside the my-app file of a basic Polymer starter kit resolves in a TypeError. 在基本的Polymer入门工具包的my-app文件中调用公共方法可以解决TypeError。 Below is a example how I used to worke with public methods.
以下是我以前使用公共方法的示例。 But when I try to call a method on a custom element inside the iron-pages of the my-app file the code below is not working.
但是,当我尝试在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>
The following simplified code creates the error. 下面的简化代码创建错误。 I am checking with attributeChanged if the my-singlevideo page is selected.
我正在检查attributeChanged是否选择了my-singlevideo页面。 If so I am trying to call the public method callFunction.
如果是这样,我试图调用公共方法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>
If the page you want to reach ( <my-student-search>
) is unique in the main document, you can use the standard document.querySelector()
method to get the custom element: 如果要访问的页面(
<my-student-search>
)在主文档中是唯一的,则可以使用标准document.querySelector()
方法获取自定义元素:
var comp = document.querySelector( 'my-student-search' )
Alternately, you can query it it by id: 或者,您可以通过id查询它:
var comp = document.querySelector( 'my-student-search#theId' )
Then call it public method on it: 然后在其上调用public方法:
comp.changeContent()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.