Binding Data to the Controls using WinJS

While working with projects, data binding is one of the most important factor for any application. We need to bind the data to the controls in order to display the same to the user. After any successful data insertion data viewing plays a great role. So the user can verify their data on screen. WinJS provides an extensive support for the same as well.

Namespace: WinJS.Bind

Let’s bind a class to the screen controls like Text boxes, spans etc. Let’s add a page control and name it as “DataBindingTest”. This will add 3 files to the project.

–   DataBindingTest.HTML
–   DataBindingTest.CSS
–   DataBindingTest.JS

In this example, we will consider a student class with 3 properties like Student Id, Student Name and Student Height.

DataBindingTest.HTML

<div id="students">
Student Id : <span data-win-bind="innerText:studId"></span><br />
<span>Student Name</span><input type="text" value="" data-win-bind="value:studName" /><br />
<span>Student Height</span><input type="text" value="" data-win-bind="value:studHeight" />
</div>

In HTML we have added a <div> element. Let’s add one <span> to display the Student ID and 2 text boxes to display the Student Name and Height. We have used the data-win-bind property of the elements to bind the data with them.

DataBindingTest.JS

Let’s define a Student class to deal with all the attributes.

var STUDENT = WinJS.Class.define(

function (studentId, studentName, studentHt) {

this.studId = studentId;

this.studName = studentName;

this.studHeight = studentHt;

});

The above class only contains a constructor to initialize the variables being passed by the user as input. Now the next step is to instantiate the class and fills data in it.

var student = new STUDENT(1, "Nirmal", "5ft 5inches");

We have created a student object from the student class and passed 3 parameters to the constructor as the initial values of the attributes. Now let’s deal with the DOM element. We need to get the parent <div> we have defined.

var students = document.getElementById("students");

Now let’s bind the object with the element.

WinJS.Binding.processAll(students, student);

processAll method takes the DOM element as the 1st parameter. Internally it traverse though all its child elements to check if any element using the data-win-bind attribute. It collect all the relevant elements and bind them with the class object. Now let’s debug the app to look into the output. This binds the data to the above fields.

In real scenario, we can add data to the class dynamically and bind that with any control. Hope this helps!!!

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s