Data Binding and Data Templating in Windows Store App

Introduction

In Windows 8 developer preview Metro Style Applications are built with the use of HTML 5 and JavaScript so we can make many applications. So, we make an application using JavaScript and HTML 5, which is how to bind in our data model to the UI layer. In Windows 8 (win RT) there are many new features.

Here, I will present an example to show how to build a template and bind a sample contact to the UI.

So, we have to use these steps.

Step 1: First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

Open Visual Studio 2011
File>New>Project
Choose Template>JavaScript> Blank Application
Rename this Application

Step 2: First of all we have to create the a template in the WinJS framework. So, open the default.html page and write this code as below.

Code : default.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Binding & Templating</title>

<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/wwaapp.js"></script>

<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>

Now we have to load and add some elements to the body part as below.

code : The body part contains these elements.

<body>
<h2>Data binding and data templating</h2>
<div id="contact" ></div>
<div id="contactTemplate" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText: firstName" class="name"></div>
<div data-win-bind="innerText: lastName" class="name"></div>
<div data-win-bind="innerText: email"></div>
<div data-win-bind="innerText: phone"></div>
</div>
</body>
</html>

Step 3: Here, create the data model and call it into the UI. We have to use some custom WinJS attributes. The data-win-control defines the control type of the element and the data-win-bind attribute finds how to bind data model to the HTML element. But all alone, this data template will never be initialized so we need to implicitly process all UI controls from the startup function in the default.js file.

Code : default.js

(function () {

'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);

WinJS.Application.onmainwindowactivated = function (e) {

if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Initialize the control templates
WinJS.UI.processAll();
// Databind the contact
databindContact();
}
}

WinJS.Application.start();
})();

function databindContact() {
// Retrieve the control template

var contactTemplate = WinJS.UI.getControl(document.getElementById("contactTemplate"));

// Build up the model to display
var model = {
firstName: "Nitin",
lastName: "Singh",

email: "[email protected]",
phone: "+91 915 232 4256"
};
// Render the databound control

contactTemplate.render(model).then(function (element) {
// Inject the control where we need it
contact.appendChild(element);
});

};

Step 4: Here, In the css file we have to add some styles into the default.css file in the application.

Code : default.css

body{

color:#ffd800;

margin-left: 28px;

}

h2 {

color:#b6ff00;
}

.name

{ font-weight: 800;
display: inline;
}

Step 5: After run this application we get this output as below.

2 Comments

Join the conversation! Your thoughts help the community grow.

Andrew Lavers14y ago
Did you just pluck this from a four months older post on ucodia.fr, and only changed the name to "Nitin Singh", didn't you? http://ucodia.fr/2011/09/windows-8-databinding-data-template-javascript-metro/
Mahesh Chand14y ago
I think you mean Visual Studio 11?