How to invoke method from outside of a Polymer component when you’re in in a *.zul file from ZK Framework?
Polymer Element:
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html"> <dom-module id="my-component"> <template></template> <script> Polymer({ is: "my-component", alert: function() { alert("alert!"); } }); </script> </dom-module>
Sample usage:
<zk xmlns:n="native" xmlns:w="client"> <n:my-component id="myComponent"></n:my-component> <button id="someButton" w:onClick="document.querySelector('#myComponent').alert()">Click Me</button> </zk>
How to attach event listener to custom Polymer component and propagate event to server side using zAu?
The event is fired inside of a Polymer element using fire() method:
this.fire('close-finish', "more detailed data", { bubbles: false });
Native JavaScript below adds a new event listener to the component. Event handler executes zAu engine command to forward the event to the server.
<n:script xmlns:n="native"> document.querySelector('my-component').addEventListener('close-finish', function() { zAu.send(new zk.Event(zk.Widget.$('$cancelButton'), 'onClick', 'finish', {toServer:true})); }); </n:script>