Using Source Binding and Templates in KendoUI

Sagar Ganatra

Jun. 27, 12 · Interview

Like (0)

Save

7.34K Views

Yesterday I explored the MVVM design pattern in Kendo UI that allows the model data to be separated from the view. Also, whenever data in one of them changes it is reflected in the other. Today I was exploring various data bindings that can be used and one that caught my attention was the source binding. The source binding allows you to set the HTML content of the target element by rendering a Kendo template with a View-Model value. For example, say you have a combo box (select tag) and you want to populate it with data (option tags), then instead of writing several option tags you can define a template and provide source binding for the same. This will show a list of options from the ViewModel.

Here's the code:

<!DOCTYPE HTML>
<html>
    <head>
        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/kendo.all.min.js"></script>
<script>
$('document').ready(function() {
viewModel = kendo.observable({
optionsData: [
{optionValue:1, optionName: "test1"},
{optionValue:2, optionName: "test2"},
{optionValue:3, optionName: "test3"}
]
});
kendo.bind($('select'),viewModel);
});
</script>
    </head>
    <body>
     Select example:
<select data-template="select-template" data-bind="source: optionsData">
</select>
<script id="select-template" type="text/x-kendo-template">
<option data-bind="attr: {value: optionValue}, html: optionName">	
</option>
</script>	
    </body>
</html>

There are several things going on here. The ViewModel object (kendo.observable) is created which contains a key optionData which is an array of JavaScript objects. Each one these object defines the option value and the html data that it should contain.

When you observe the view part defined in the body it has a select tag with a data-template attribute. The value provided in the data-template attribute should match with the id of the script tag that contains html content that should be inserted inside the select tag. Here that html content or the template contains the option tag. Also, the select tag defines the data-bind attribute wherein the source binding referring to the optionData is defined. The Kendo template is a script tag with the id same as the data-template value specified in the select tag and with attribute type defined as 'text/x-kendo-template'. The body of the script tag contains the template (option tag) which will be iterated over for the number of JavaScript objects defined in the source. The option tag defined in the template also has the data-bind attribute which defines the binding for the value and the html attribute.

Now when the page is rendered, you would be able to see a select tag with three options - ['test1','test2','test3']. Similarly this can be applied to other tags (ordered\un-ordered lists) where the base template is defined and its value is bound to a ViewModel.

Template Binding (linguistics)

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments

Using Source Binding and Templates in KendoUI

Popular on DZone

Partner Resources