One of the new things you can do in ZK8 is to publish a ZK’s data binding command on a native html element. For example, you can publish a doClick command in your view model with an onClick event in a html Button. By using this cool feature, we can now easily grab some native html elements and make them work with ZK’s data binding. In the rest of this blog, we will demo how to make a Polymer web component interact with ZK’s data binding. If you are not familiar with Polymer, please checkout their official page.
This demo displays the temperature variation of New York City by date. User can choose which day they want to check out by selecting the date on the calender.
We have three files for this demo, a zul page, a view model and a data model. Our zul page looks like the following:
The calendar we used here is d-calendar, which is a polymer component made by Darek Rossman and the chart we used here is ZK Charts. At line 2, we import the d-calendar html file. At line 11, we bind our chart’s model to the chartModel in our view model. In the script tag, we subscript the date-selected event provided by d-calendar at line 15. Then at line 18, we use ZK8’s new client side data binding API to publish a doDataSelected command back to our view model. In our view model,the doDataSelected method looks like: