Calling a public method inside the my-app file of a basic Polymer starter kit resolves in a 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.
<!--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. If so I am trying to call the public method 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:
var comp = document.querySelector( 'my-student-search' )
Alternately, you can query it it by id:
var comp = document.querySelector( 'my-student-search#theId' )
Then call it public method on it:
comp.changeContent()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.