Using Source Binding and Templates in KendoUI
Email
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
