Essential Studio for JavaScript controls have seamless support for Knockout. For each control, we have created a Knockout custom binding handler with the same name as the control. For example, the ejGrid control’s Knockout binding handler name is ejGrid. Also, all the control properties can be defined in the attributes of the binding handler.
We have added a new JavaScript file for defining and maintaining all these binding handlers. The CDN location of the file is:
http://cdn.syncfusion.com/js/ej.widget.ko-latest.min.js
Offline, the file is available in the Essential Studio for JavaScript installation folder.
The example code for using the JavaScript binding handler and defining its attributes is as follows:
Data Binding
Essential Studio for JavaScript supports two kinds of data binding: one way and two way.
One-way binding means interaction between Knockout and Essential Studio for JavaScript controls is one way. That is, a JavaScript control can receive value changes from Knockout and update itself based on the new value. All the properties of Essential Studio for JavaScript controls can be used this way.
The second type of data binding is two-way binding. This means the properties of Essential Studio for JavaScript controls and Knockout observables can talk to each other. In this case, the JavaScript controls can both send value changes to the Knockout library and receive value changes from it. Two-way binding is not required for most properties in a control. For example, a read-only or layout control does not need two-way binding because it is not going to change any value in the model. This binding is implemented in the dynamic properties of each control whose value changes due to action in it.
The example code for enabling Knockout support in the ejGrid control is as follows:
In this example, the view model property currentpage with an observable value is associated with the currentPage property of the ejGrid control’s pageSettings and the value property of the ejNumericTextbox control, which offers two-way binding.
Since we have given an observable value to the view model property currentpage, the binding will update the element values (the numeric text box value and the grid pager) whenever the value changes. When the user updates the value in the ejNumericTextbox control, the view-model property updates the grid’s current page. Likewise, when the user changes the page in the ejGrid control, the view-model property updates the value in the numeric text box.
We have added a Knockout sample in our online JavaScript Sample Browser that showcases Knockout support in Essential Studio for JavaScript.
