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>
   
<!-- 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


Up Next
    Ebook Download
    View all
    Learn
    View all