Using Source and Template binding with ViewModels to generate HTML content

In the previous recipe, data binding between View components and ViewModel attributes was explored. Binding can be performed not only on the value of the form elements, but also on the attributes, and also to hide or show the elements on the page. In this recipe, we will look at the source and the HTML binding in combination.

Consider a dropdown (to select an element) that you want to populate it with data (option tags). The data for these could be provided from a ViewModel object; use a template to generate these option tags.

How to do it…

Let's first construct a ViewModel object:

var viewModel = kendo.observable({
    optionsData: [
                   {optionValue:1, optionName: "Test1"},
                   {optionValue:2, optionName: "Test2"},
                   {optionValue:3, optionName: "Test3"}
                 ]
});

The ViewModel object here contains an optionsData attribute, which is a collection (array) of objects. Each object in optionsData contains two attributes, namely optionValue and optionName. The optionValue attribute will be used for the value attribute of the option tag, and optionName will be used for the HTML content to be shown in the dropdown. The template that contains the option tag binding is shown in the following code snippet:

<script id="select-template" type="text/x-kendo-template">
  <option data-bind=
    "attr: {value: optionValue}, html: optionName">                          
  </option>
</script>

Here, the template with the id attribute set to select-template contains one option tag. The option tag contains the data-bind attribute whose value is attr: {value: optionValue}, html: optionName. We already saw the attribute binding in action in the previous recipe. The other binding specified here is html. This binding is used to generate the HTML content for the tag. These option tags should be bound to the ViewModel object and be encapsulated inside a select tag.

The select tag can refer to the template (mentioned previously) and bind to the ViewModel object using the source attribute:

<select data-template="select-template" 
  data-bind="source: optionsData">
</select>

Here, the select tag specifies the two attributes, namely data-template and data-bind. The value of the data-template attribute is the id attribute of the template (the script tag) that we defined earlier, that is, select-template. This instructs kendo to bind the template to the select tag, and the generated content would become the HTML content for this select tag.

The data-bind attribute specifies a binding source that refers to the optionData model attribute in ViewModel. Now, the only step pending is to bind View elements to ViewModel, which is attained by executing the following line of code:

kendo.bind($('select'),viewModel);

How it works…

The select tag specifies the source binding that refers to the optionsData model attribute. This will make the collection of objects available to all the tags inside it.

The data-template attribute that refers to the template in the page is provided with the collection of objects (optionsData) and the template is iterated for the number of entries in the array. In this example, the optionsData collection contains three objects and hence, the template is generated three times and inserted as the HTML content for the select tag. The generated content would look like the following code snippet:

<select data-template="select-template" 
  data-bind="source: optionsData">
  
  <option data-bind=
    "attr: {value: optionValue}, html: optionName"  
    value="1">
    Test1
  </option>
  
  <option data-bind=
    "attr: {value: optionValue}, html: optionName"  
    value="2">
    Test2
  </option>
  
  <option data-bind=
    "attr: {value: optionValue}, html: optionName"  
    value="3">
    Test3
  </option>
  
</select>

The data- attributes would remain as they are, and the generated content now has the value attribute and the HTML content. Note that the preceding code could have been accomplished by using a for statement in a hash-based template and then appending the generated output to the select tag. However, using a data-template attribute and source binding allows you to do this seamlessly and write more intuitive code.

This pattern can be applied in various situations. Another example includes generating list tags (li elements) and inserting them into an unordered or ordered list.