Derik Whittaker

Syndication

News


Leveraging your XAML MVVM Skills in HTML –- Setting up the Data Context

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 (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 setup 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 vs Knockout.

How to setup the Data Context in XAML

 

image

The image above illustrates a very typical, and easy 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 views 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 when using KnockoutJs?

How to setup the Data Context in Knockout Js

image

The image above is the 1 to 1 equivalent to setting up your data context in Knockout Js.

Breaking down this code.

  1. We are creating a self executing function, you can think of this as the constructor for the HTML page (that is a stretch analogy 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 which 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 based applications.

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 08-10-2013 6:14 AM by Derik Whittaker
Filed under: , ,

[Advertisement]

Comments

Derik Whittaker wrote Leveraging your XAML MVVM Skills in HTML – Working with Observable Properties
on 08-20-2013 12:54 PM

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

Derik Whittaker wrote Leveraging your XAML MVVM Skills in HTML – Working with Observable Arrays
on 09-03-2013 4:38 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 – 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)