HTML5 Zone is brought to you in partnership with:

Derik Whittaker is a Software Architect who specializes in all things .Net. Derik has been building enterprise systems on top of the .Net technology stack for over 12 years and along the way has picked up a thing or two about how to create killer systems. During his 12 year career Derik has worked in many different industries ranging from Marking, Healthcare, Retail, Insurance, Automotive and Online Entertainment. Currently Derik is working for a Technology startup (VStrator) in Raleigh North Carolina helping them build out a best of breed technology solution which will enable their users to create world class coaching solutions. Derik believes that the job of a developer is more than just turning syntax into working 1’s and 0’s. Derik is a DZone MVB and is not an employee of DZone and has posted 22 posts at DZone. You can read more from them at their website. View Full User Profile

Leveraging your XAML MVVM Skills in HTML – Working with Observable Arrays

  • submit to reddit

This is a multi-part excerpt series from my PluralSight course Knockout for the XAML Developer 


Knockout for the XAML Developer

The Knockout for the XAML developer course helps XAML developers, whether you’re a WPF or Silverlight developer, take their existing MVVM skills and transition them to the exciting world of HTML development.

This series is going to be broken down into 6 parts and should be enough show you how you can leverage your existing MVVM Skills you acquired while building XAML  and apply those to building HTML applications with Knockout JS.

Series Table of Contents

  1. Setting up the Data Context 
  2. Working with Observable Properties 
  3. Working with Observable Arrays (this post)
  4. Handling User Click Events
  5. Handling Binding Context Changes
  6. Changing UI Appearances based on Bindings

After we have set up our view model and bound it to our markup thing, what we would typically do is start setting up our observables. In my prior post, we took a look at how to work with Observable Properties, but what about working with an array of items? 

When working with XAML applications, you would set up your observable collections as seen below.

How to setup an Observable Collection in XAML


The code above is pretty straightforward. We have a property, which is of type ObservableCollection. When we set up our property, we set up our backing field along with raising property change messages each time the array is populated. One thing not illustrated here is what happens when an item is added or removed from the collection. That is because this is handled by the ObservableCollection class. Each time something is added or removed, the underlying collection type will raise the notifications for us.

Now that we remember how to set up an observable collection in XAML, how would we accomplish the same using KnockoutJS?

How to setup an Observable Array in KnockoutJS


The image above is a 1 to 1 match for setting up an Observable Collection Knockout vs XAML.

If we break down our code (this code is written in Typescript)

  1. We first declare our property, in our case ReminderGuests
  2. We tell the Typescript Complier this is an ObservableArray of type UpcomingReminderModel (not needed if not using Typescript)
  3. We initialize our property via Knockout using ko.observableArray([]) (I like to init the array as empty out of convention)

We now have an observable array declared. How do we use it in our Markup?


To use an Observable Array in Knockout, what we need to do is use the ‘foreach’ binder, and away we go.

If you want to learn more about how your XAML MVVM skills transfer to HTML Development, watch my Pluralsight Course – Knockout for the XAML Developer.


Published at DZone with permission of Derik Whittaker, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)