Data binding (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Purpose
Data binding enables you to synchronize the elements of your app with different sources of data, including databases, files, and internal objects.
In this section
| Topic | Description |
|---|---|
You can bind data and styles to HTML elements by using Windows Library for JavaScript binding. Binding with WinJS 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 objectand How to use templates to bind data. |
|
In many cases you want your app to bind to complex objects, in particular objects that manage processes that are not controlled by the app's UI. This topic shows how to write an app that displays data from an object that contains a name and a color, which is basically the same as the Quickstart: binding data and styles. In this case the object manages the change process itself, instead of responding to a button that triggers the change. |
|
WinJS templates are a convenient way to format and display multiple instances of data. You can use these templates in conjunction with ListView and FlipView objects to specify the way you want them to be displayed. You can also use a template to bind multiple instances of a data object without using a predefined view. For more information about using a template with a ListView, see Quickstart: Add a ListView. For more information about using a template with a FlipView, see Adding FlipView controls. The following procedure shows how to use a template with an array. You can define a template declaratively as a WinJS control and specify its internal structure and style. Even though they are declared as DIV elements, templates are not processed as part of the DOM and are not returned as part of DOM search results. You can either specify the DIV element in which the template should appear, or allow the render method to create its own DIV element. This topic shows how to use a template to bind a variable number of bindable data objects to a DIV element. The user chooses the number of objects to display by selecting an item from a drop-down list. |
Developer audience
This section is designed for use by developers of Windows Runtime apps using JavaScript who want to display different kinds of data in their apps.