In this blog you will learn how to accomplish data binding within template using Kendo UI framework. An interesting feature of this framework on which we are going to shed some light on is the Mode-View View Model (MVVM) design pattern, which is in-built.
The task of design pattern (MVVM) is to allow you to separate the Model (data) from the View. The View Model for MVVM explores data objects that are consumed by the view. One thing important about the View Model is that if a user modifies data in the view, the model gets updated with the new data.
I will now show you how data template binding is used in Kendo UI for source binding. In fact, source binding enables you to link HTML data content of a target element by rendering Kendo templates to a View-Model value.
You can understand this more clearly with a simple example. Assume that you need to display a list of employees and populate it with data that is properly formatted such as in a table or list. Normally you are tempted to write numerous option tags. But a better alternative exists – you can define Kendo templates and provide source binding for the same.
To put this in action, here’s the code:
Here, we have created a viewModel object “Kendo.observable”. It contains names of employees as an array of JavaScript objects. Each one these object defines two things - employee value and HTML data that it should contain. Likewise it allows you to make use of your own data source other than using this JavaScript object array.
As is evident, the code above defines the list/table format for displaying your data.
Next, you have to add “data-template“in tag. Just take care that the value you provide in the data-template attribute matches the script tag containing the HTML data. Insert it inside the tag. Notice that the tag defines “data-bind” attribute where the source binding reference to the employees data is defined.
This is how your data will display once you render the page (which you have defined earlier) in the ViewModel object by using Kendo UI data template binding method.
All in all, it’s really as simple as a script can be. Once you have gone through the code and the explanations, making your own script won’t be all that difficult! It will just take a bit of experimenting on your part to come up with something that matches your requirements. Have a nice day!