Over a million developers have joined DZone.

Leveraging Your XAML MVVM Skills in HTML: Setting Up the Data Context

· Web Dev Zone

This is a multipart excerpt series from my PluralSight course Knockout for the XAML Developer.

knockout-xaml-developerKnockout 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 in to six parts and should be enough to show you how you can leverage the existing MVVM skills you acquired while building XAML and apply those to building HTML application with KnockoutJS.

Series Table of Context

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

One of the key tenants to MVVM in XAML is the ability to set up a data context and binding.  This post is going to be dedicated to comparing and contrasting the way you handle setting up your binding context in XAML versus Knockout.

How to set up the data context in XAML:

image

The image above illustrates a very typical and easy way to bind your data context to your view.  All we have done is created an instance of our view model and pushed it into the view's DataContext. Once the line above has been executed, all the bindings in your view will be updated and you are cooking with fire.

How do we accomplish the same goal in Knockout?

How to set up the data context in Knockout:

image

The image above is the one-to-one equivalent to setting up your data context in KnockoutJS.

Breaking down this code:

  1. We are creating a self-executing function. You can think of this as the constructor for the HTML page (this analogy is a stretch but it works).
  2. We then create an instance of our ViewModel.
  3. We call ko.applyBindings and provide our view model. This is the line of code that binds our ViewModel to our view.

As you can see, setting up your data context in Knockout is very similar to setting up the data context in a XAML application.

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.

Until next time.

Topics:

Published at DZone with permission of Derik Whittaker, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}