Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML) (Windows)

10 out of 18 rated this helpful - Rate this topic

You can bind data and styles to HTML elements by using Windows Library for JavaScript binding. Binding with Windows Library for JavaScript is one-way by default, which means that the HTML element is updated when the data and style values change, but the data is not updated when the HTML element changes. This quickstart shows the most basic kind of binding, which is a declarative binding to a simple object that contains only data. For information about more advanced kinds of binding, see How to bind a complex object and How to use templates to bind data.

Important When you perform declarative binding, you should always set the WinJS.Binding.optimizeBindingReferences property to true in the startup procedure for your app. If you do not do so, the bindings in your app may leak memory.

Prerequisites

This topic assumes that you can create a basic Windows Store app built for Windows using JavaScript. For instructions on creating your first app, see Creating your first Windows Windows Store app using JavaScript.

Setting up a binding project

To set up a project to use binding, complete these steps.

Create a new blank Windows Store app using JavaScript and name it BindingApp.

In default.html, replace the template HTML with this HTML.

HTML


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>BindingApp</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>
         <!-- BindingApp references -->
         <link rel="stylesheet" href="/css/default.css" />
         <script src="/js/default.js"></script>
      </head>
      <body></body>
</html>

Set the WinJS.Binding.optimizeBindingReferences property to true in your startup procedure. In this case you can add it to the beginning of the default.js file in your project.
JavaScript
Copy
(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; ... }
Add a DIV element for the binding, and give it an ID of "basicBinding" and an inner text of Welcome, as shown here.
HTML
Copy
<body> <div id="basicBinding"> Welcome </div> </body>

Binding data

You can bind any kind of data to an HTML element, but for purposes of illustration we'll just set up a person object that has a field for a first name.

Warning Do not attempt to bind data to the ID of an HTML element.

Add a SCRIPT element to the body of the default.html file after the DIV element. The binding code must appear after the element to which it is bound (in this case, the SPAN element that will get added in the next step).
HTML
Copy
<script type="text/javascript"> var person = { name: "Fran" }; </script>

Inside the DIV element, add a SPAN element that accesses the person.name field.

HTML


<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

You must call WinJS.Binding.processAll to have the name appear. WinJS.Binding.processAll starts looking for the data-win-bind attribute at the specified element and then searches all the descendants of that element.
HTML
Copy
<script type="text/javascript"> var person = { name: "Fran" }; var personDiv = document.getElementById("nameSpan"); WinJS.Binding.processAll(personDiv, person); </script>
When you build and debug the project, you should see this:

Welcome, Fran
Right now the binding is one-time only, which means that the text won't change when the data changes. By itself, a JavaScript object can't notify the application when it changes, but you can convert the object to a binding context by using WinJS.Binding.as. Add the following line of code after the WinJS.Binding.processAll call.
JavaScript
Copy
<script type="text/javascript"> var person = { name: "Fran" }; var personDiv = document.getElementById("nameSpan"); WinJS.Binding.processAll(personDiv, person); var bindingSource = WinJS.Binding.as(person); </script>
The bindingSource object is the observable representation of the person object, so changes made to bindingSource can be displayed in the bound HTML element.
To demonstrate what happens when the underlying data changes, we'll just use a button to simulate getting data from a different process or from an internal data store. Add a BUTTON element, like this.
HTML
Copy
<button id="btnGetName">Get name</button>

Add a mock method that simulates getting the data. In this case, we'll get the name from an array by using a randomized index. Use the following code to handle the click event of the button.

JavaScript


var btn = document.getElementById("btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

To test this code, build and debug the application. You should see a different name every time you click the Get name button.

Binding a style

Now we'll bind the background color of the SPAN element.

Add a color field to the person object.

JavaScript


var person = { name: "Fran", color: "red" };

Add a style.background value to the data-win-bind attribute, and set its binding to the color field of the person object.

HTML


<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>

Add a second array of colors and change the getName function to so that it updates the color of the name.

JavaScript


var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

Don't forget to change the getName call in the click event handler.

JavaScript


var btn = document.getElementById("btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

When you build and debug the app, you should see that clicking the Get name button updates both the name and the color of the name.

Summary and next steps

In this quickstart, you saw how to bind a simple JavaScript object to an HTML span.

To find out how to bind more complex objects, see How to bind a complex object. If you want to use a template to bind multiple objects, see How to use templates to bind data.

Build date: 10/26/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)