Getting Started with Knockout.js and MVVM

Introduction

JavaScript is almost as old as the first graphical browsers, but it has been swimming in a sea of spaghetti code since its inception. With the introduction of many JavaScript frameworks over the years, there has been a lot of improvement in making it a robust programming language. One such framework is Knockout.js, which uses the MVVM (Model-View-ViewModel) pattern to bind HTML templates to a JavaScript view model.

My team and I compared competing JavaScript frameworks (such as Angular, Knockout, Ember, etc). Then, we selected Knockout for several reasons. It uses clean data-binding syntax, has plenty of online resources, and even has support from Microsoft. Its creator Steve Sanderson is now a Microsoft employee, and Knockout is included in a new web project created within Visual Studio 2012.

To get started, check out the KnockoutJS template for Visual Studio 2012:

http://www.asp.net/single-page-application/overview/introduction/knockoutjs-template

Data-Binding

The examples below illustrate how you can bind an HTML view to a JavaScript view model using observable() and computed().

HTML source:

<p>First name: <span data-bind="text:firstName"></span></p> 
<p>Last name: <span data-bind="text:lastName"></span></p> 
<h2>Hello, <span data-bind="text:fullName"></span>!</h2>

JavaScript view model:

function AppViewModel() { 
 this.firstName = ko.observable('Bob'); 
 this.lastName = ko.observable('Smith'); 

 this.fullName = ko.computed(function () { 
 return this.firstName() + " " + this.lastName(); 
 }, this); 
}
ko.applyBindings(new AppViewModel());

HTML view (the result)

First name: Bob

Last name: Smith

Hello, Bob Smith!

An observable() represents a single property, while a computed() member represents a more complex property that can be computed in an anonymous function. To learn more about how bindings work, walk through the documentation and interactive tutorials on the Knockout website:

Interactive Tutorials: http://learn.knockoutjs.com/
Documentation: http://knockoutjs.com/documentation/introduction.html

You may try out the above sample HTML and JavaScript on the interactive tutorial website to see instant results!

More data-binding

To bind to a list of items, use observableArray() instead of observable().

HTML source:

<ol data-bind="foreach:myObservableArray">
 <li>
 <span data-bind="text:lastName"></span>, 
 <span data-bind="text:firstName"></span>
 </li>
</ol>

JavaScript view model:

function AppViewModel() {

 this.myObservableArray = ko.observableArray([
 { firstName: "George", lastName: "Washington" },
 { firstName: "John", lastName: "Adams" },
 { firstName: "Thomas", lastName: "Jefferson" }
 ]);
}
ko.applyBindings(new AppViewModel());

Once again, you may try out the above example on the interactive tutorial website.

Additional Resources

To get the most of out Knockout, go through the following articles, websites and tutorials. You will be able to build a complete end-to-end web application using additional frameworks, libraries and templates that play well with Knockout.

* Building HTML5 and JavaScript Apps with MVVM and Knockout: http://pluralsight.com/training/Courses/TableOfContents/knockout-mvvm

* Single Page Apps with HTML5, Web API, Knockout and jQuery: http://pluralsight.com/training/Courses/TableOfContents/spa

* Revealing Module Pattern: http://blog.pluralsight.com/2012/10/02/revealing-module-pattern-structuring-javascript-code-part-iii/

* Boilerplate template: http://html5boilerplate.com/

* Breeze: http://learn.breezejs.com/

* qunit JavaScript testing: http://qunitjs.com/

Comparison with other frameworks:

What about those other JavaScript frameworks that my team and I had looked at?

Here’s are some comparisons:

You may find that Knockout is not for you, and may decide that a competing framework fits your needs. Enjoy!