WinRT JavaScript - Templates & Data Binding

Written by Ian Elliot

Article Index
WinRT JavaScript - Templates & Data Binding
Templates and data
Data binding
The databound table

Page 3 of 4

If you run the complete program then you will see a table with a single row. If you add a second identical call to render then you will see two rows and so on:

table1

For completeness the body of the HTML file is:

<body>
 <div id="Mytemplate" data-win-control=
                                "WinJS.Binding.Template">
  <table>
   <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
   </tr>
  </table>
 </div>
 <table id="Display" border="1">
 </table>
</body>

The complete DOMContentLoaded event handler (with just one table row rendered) is:

WinJS.UI.processAll();

var template = Mytemplate.winControl;
template.render().then(
 function (element) {
     var tr = element.firstElementChild.
                      firstElementChild.firstElementChild;
     Display.appendChild(tr);
 });
template.render().then(
 function (element) {
     var tr = element.firstElementChild.
                     firstElementChild.firstElementChild;
     Display.appendChild(tr);
 });

It would be a more convincing example if the Template render function would render a table row but the basic operating principles are clear and perhaps it will work as advertised in a later version.

If you have a standard block of HTML that you want to use multiple times then create and use a template.

Simple Data Binding

OK you might be a little impressed by the Template object but the example of the table given above shows that it is less than perfect.

Each row of the table is the same as the last one. What we need is some way of inserting data into the rendered Template and this is where data binding comes in. This is a very simple form of static data binding but it where the more complicated examples start from and these are described in more detail in the next chapter.

The idea is that when you call the render method you can specify as the first parameter a JSON data structure, which will be used to initialize properties of the Template's contents.

That is the full version of the render method is

render(dataContent, container);

Where dataContent supplies the data to be used to initialize the rendered content an the container specifies the element used to store the rendered content.

Thats is by specifying a set of name-value pairs you can customize the template that you render.

A databound template

The best way to understand how dataContent works is by way of a simple example.

First we need a Template with one item of content with a data-win-bind attribute. To keep things simple let's use a <div>:

<div id="Mytemplate" data-win-control=
               "WinJS.Binding.Template">
 <div data-win-bind="innerText:myText">
 </div>
</div>

The data-win-bind attribute is always of the form

element property: data source property

In the case of our example

data-win-bind="innerText:myText"

the element property is innerText and the data source property is myText.

When we call the render method we provide a simple object with a myText property set to the value that we want to apply to the template content. For example:

template.render({ myText: "Hello World" }).then(
      function (element) {
       Display.appendChild(element);
 });

If you run this program the innerText property of the <div> is set to "Hello World". Notice that this is slightly complicated because the JSON refers to a variable i.e. myText and the HTML then links this to the property to be bound to the data i.e. innerText. That is

"Hello World"->myText->innerText.

The binding is static because after the Template is rendered any changed to the data source aren't reflected in the rendered object.

There is one more complication. If any of the elements within the template have a

data-win-bindsource=object;

attribute then the specified object is used as the source of the data and not the one specified in the render method.

Also if you specify a data-win-bindsource attribute on an element it applies to all of the elements nested within it. To make this all work however we need to dig a bit deeper into the data binding system.

<< Prev - Next >>