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>
<!-- WinJS references -->
<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>
<!-- DataBinding references -->
<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.
![output.gif]()