knockoutjs and MVVM

MVVM ( Model View ViewModel ) is a new architechture that is heavily followed in mainstream enterprise frameworks these days along with other frameworks. I’ll talk less about this and talk more about knockoutjs in this post. Knockout is an extraodrinary library, which if fully utilized in its best way, it can be very efficient and day saver in the end.

You can get more info about knockoutjs here at http://knockoutjs.com/

I’ll follow through a scenerio how we can utilize knockoutjs library in the simplest way possible.

Say, we have a webservice that is returning us some Json data. We want to pull data out of it and bind to our controls back there in the html form. Lets do it here.

Suppose our html is like this:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
Now we see that we provided just some databind attributes to the input controls. What we want is that when user adds firstname or lastName in the text boxes, it should concat those and display those in the <h2> tag which we have binded with fullName.
One classic approach would be to declare a onkeydown event on both first name and last name and in the event declaration, we can concat and set it into fullName block. For that we have to declare some extra stuff like we have to id-fy our controls, declare events, write some javascript.
Lets see a more savvy approach!
We will reference knockoutjs lib in the page, and in script portion write the following code (btw we can do the same code in seperate js file as well for clean seperation of code):
// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"));

What we have done here is we created a view model, and we created firstName and lastName properties in it, and ensured the two way binding through ko.observable(first). And for the replacement of javascript keydown event we have done it in a more cleaner way by making a computed function fullName.

In the end i called ko.appyBindings() function that does all the magic to bind my form with my viewModel and with event notifications to and fro.
Knockoutjs is a great library and with a great future ahead. I will be posting more on this so keep looking.

Html 5 Sessions in Pakistan’s top Universities

Discussed the awesome technology with the following universities at Higher education Commission Video Conference facility,  facilitated by Microsoft Pakistan. It was a wonderful session, we saw some live examples and have an introduction  of HTML 5.

Following are the universities who attend the HTML5 session on 3rd Feb, 2012.

 Mirpur University of Science and Technology

  1. Institute of Management Science Peshawar
  2. Kohat university Peshawar
  3. Dow university of Health and Science
  4. Punjab University
  5. Frontier Women University
  6. UST Bannu