WinJS.Binding.Template object (Windows)

2 out of 4 rated this helpful - Rate this topic

Provides a reusable declarative binding element.

Syntax


var object = new WinJS.Binding.Template(element, options);

Members

The Template object has these types of members:

Methods
Properties

Methods

The Template object has these methods.

Method	Description
render	Binds values from the specified data context to elements that are descendents of the specified root element that have the declarative binding attributes specified (data-win-bind and data-win-bindsource).
render.value	Renders a template based on the specified URI.
renderItem	Renders an instance of this template bound to the data contained in item. If the recycled parameter is present, and enableRecycling is true, then the template attempts to reuse the DOM elements from the recycled parameter.
Template	Creates a template that provides a reusable declarative binding element.

Properties

The Template object has these properties.

Property	Description
element	Gets the DOM element that is used as the template.
isDeclarativeControlContainer	Determines whether the Template contains declarative controls that must be processed separately. This property is always true. The controls that belong to a Template object's children are instantiated when a Template instance is rendered.
processTimeout	Gets or sets the number of milliseconds to delay instantiating declarative controls. Setting 0 results in no delay. Setting any negative number results in a msSetImmediate delay. Any positive number sets the number of milliseconds to delay.

Remarks

For more information about using templates with a ListView, see Quickstart: Add a ListView. You can also refer to the ListView sample. For more information about using templates with a FlipView, see Adding FlipView controls. You can also refer to the FlipView sample. For an explanation of how to use these templates with an array, see How to use templates to bind data.

Examples

The following example shows how to use templates to bind data from an array of custom objects. This code is taken from the topic How to use templates to bind data.

JavaScript


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TestTemplate</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- TestTemplate references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <fieldset id="templateControlObject">
        <legend>Pick a person:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>

    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li><span>Name :</span><span data-win-bind="textContent: name"></span></li>
                <li><span>Birthday:</span><span data-win-bind="textContent: birthday"></span></li>
                <li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
                <li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>

    <div id="templateControlRenderTarget"></div>

    <script type="text/javascript">

        var Person = WinJS.Binding.define({
            name: "",
            color: "",
            birthday: "",
            petname: "",
            dessert: ""
        });

        var people = [
            new Person({ name: "Bob", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
            new Person({ name: "Sally", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
            new Person({ name: "Fred", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" }),
        ];

        WinJS.Utilities.ready(function () {
            var selector = document.getElementById("templateControlObjectSelector");
            selector.addEventListener("change", handleChange, true);
        }, false);

        function handleChange(evt) {
            var templateElement = document.getElementById("templateDiv");
            var renderElement = document.getElementById("templateControlRenderTarget");
            renderElement.innerHTML = "";

            var selected = evt.target.selectedIndex;
            var templateControl = templateElement.winControl;

            while (selected >= 0) {
                templateElement.winControl.render(people[selected--], renderElement); 
            }
        }
    </script>
</body>
</html>

Requirements

Minimum supported client	Windows 8 [Windows Store apps only]
Minimum supported server	Windows Server 2012 [Windows Store apps only]
Namespace	WinJS.Binding
Library	Base.js

Build date: 12/5/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)