Derik Whittaker

Syndication

News


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

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

knockout-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 show you can leverage your existing MVVM Skills you acquired while building XAML based and apply those to building HTML application with Knockout JS

Series Table of Context

  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 setup our view model and bound it to our markup thing 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 in XAML applications you would setup your observable collections as seen below.

How to setup an Observable Collection in XAML

image

The code above is pretty straight forward.  We have a property which is of type ObservableCollection.  When we setup our property we setup 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 setup an observable collection in XAML how would we accomplish the same using KnockoutJS?

How to setup an Observable Array in Knockout Js

image

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?

image

To use an Observable Array in Knockout as 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

Till next time,


Posted 09-03-2013 3:38 AM by Derik Whittaker

[Advertisement]

Comments

Derik Whittaker wrote Leveraging your XAML MVVM Skills in HTML – Handling Click Events
on 10-10-2013 8:50 AM

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

Derik Whittaker wrote Leveraging your XAML MVVM Skills in HTML – Changing Binding Context
on 10-14-2013 5:30 PM

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

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)