Thoughts from the Wet Coast
The musings of an ASP.NET Developer from Canada's We(s)t Coast

So, in the last post on Knockout.js, I introduced the concept of Observable Arrays.  Observable Arrays can respond to a change in the number of items in the collection (array).

Lets look first at Adding items to an observable array.  Lets add a method to our ViewModel to add a task to the tasks array that we created in the previous post.

In previous posts in this series I introduced the concept of observables, and I referred to the concept of Observable Collections in Xaml (WPF and Silverlight) applications.  Knockout also supports the concept of observable collections, although because JavaScript only has one collection type they are observable arrays.

Just as an observable responds to changes in an object, an observable array responds to a change in the number of items in the array.  It tracks which objects are in the array - not the state of those objects.

So far we have seen how we can set up simple observable values.  But what if we want to have calculated values in our ViewModel.

Lets extend our ViewModel from the previous examples, by renaming our personName property as firstName and add a second property called lastName.

So far in this series on Knockout.js we have seen how to do simple data-binding and how to use observables to automatically update the data bound elements.  The real power of knockout though is its support of two-way data-binding. 

What do we mean my two-way data-binding?

ASP.NET developers are familiar with the concept of data-binding - the ability to bind a control to a data source and update the control based on the value of the data source.  Two way data-binding allows the control (View) to update the data source if its value changes.

In the previous post in this series I introduced the concept of simple one-way data binding.  However the real power of knockout is its support of observables and two-way binding. 

The concept of observable objects or observable collections was developed for WPF (Xaml) and Silverlight. 

In the first part of this blog series on Knockout.js, I introduced the MVVM (Model-View-ViewModel) nature of the framework. In this second post I will show how Knockout’s data-binding works.

“It’s a Knockout” – a phrase often heard at boxing matches.  Or for those who remember 70’s and 80’s European TV shows, it was the name of a BBC television game show (It’s a Knockout or Jeux Sans Frontiers), also memorialized in the Peter Gabriel song “Games without Frontiers”.