Windows Store App Development Series : Part 12 – Data Binding

Hello,
 
Data binding is one of the most important feature of Windows Store App. Its an automatic way of updating the View [HTML] if the underlying data model changes as well as it updates the model if user makes any changes to the associated View. Assume you have multiple input controls like TextBox, ListBox, Option button etc. in your app and you want to bind these controls to underlying data model properties like customer name, city, in a web application there are different libraries and framework [KnockoutJS, AngularJS to name a few] which can be used to define the binding. In a Windows Store App, WinJS library provides its own functions and predefined HTML tags which makes it really easy for application developer to define the data binding. This post is just at attempt to explain it to you.

 
Note – if you haven’t read Defining classes and namespace article in this series, I suggest you to take a pause and read it before. Even though for data binding its not completely necessary to understand classes and namespaces, it will still help you to understand data binding code better.
 
Okay, now assuming you know how to define classes and namespace using WinJS library, lets dive into data binding.

WinJS library provides two ways to define data binding in a Windows Store App.

  1. Using JavaScript
  2. Declarative Binding in HTML

Lets understand each data binding type with an example.

Data Binding Using JavaScript

WinJS library contains WinJS.Binding namespaces which contains a set of classes which can be used to define data binding. In this example, we will look into WinJS.Binding.as function which is used to define the binding between custom data model and application View. It returns an observable object. Let’s take a look at example -

In the code example below, we have defined a data model customer and defined name as a model attribute. Next we have defined the binding between customer data model and OutputSpan HTML element using bind function. In this example, whenever user types the value in InputText HTML element, we are updating the model value. Since we already defined the association between model and OutpuSpan HTML element, the update model value gets displayed immediately.

app.onactivated = function (args) {
    // Custom model with 'name' attribute
    var customer = WinJS.Binding.as({
        name: ''
    });

    // Bind the model attribute name to Output span
    var outputSpan = document.getElementById('OutputSpan');
    customer.bind('name', function (value) {
        outputSpan.textContent = value;
    });

    // Update model value [name] when user types in input textbox
    var inputText = document.getElementById('InputText');
    inputText.onkeyup = function () {
        customer.name = inputText.value;
    }
    WinJS.UI.processAll();
};

Run above code and enter some value in the input textbox. The entered value will be displayed immediately in OutputSpan HTML element.

Data Binding

Declarative Binding in HTML

WinJS library allows app developer to define the data binding in HTML itself. In the below defined HTML code, we have declaratively bound OutputSpan HTML element with name attribute of data model.

<div id="InputDiv">
    Enter your name -
    <input type="text" id="InputText" />
</div>
<br />
You entered -
<div id="OutputDiv">
    <span id="OutputSpan" data-win-bind="textContent:name"></span>
</div>

Once you define the binding in HTML, you don’t need to redefine it in JavaScript. You just need to execute WinJS.Binding.processAll method to bind the DOM elements with data model which has data-win-bind attribute. The processAll function requires two parameters – the DOM element which needs to be bind and the data model. In this case we have passed document.rootElement and customer data model, so that all the DOM elements which contains data-win-bind attribute will get bind to customer data model

app.onactivated = function (args) {
    // Custom model with 'name' attribute
    var customer = WinJS.Binding.as({
        name: ''
    });

    // Update model value [name] when user types in input textbox
    var inputText = document.getElementById('InputText');
    inputText.onkeyup = function () {
        customer.name = inputText.value;
    }

    WinJS.UI.processAll();
    WinJS.Binding.processAll(document.rootElement, customer);
};

Run above code and you should not see any difference in the output.

Summary

In this article, we have covered different data binding techniques in a Windows Store App. I hope it was useful to you.

Thanks for reading.

Leave a Reply