Derik Whittaker

Syndication

News


Leveraging your XAML MVVM Skills in HTML – Changing Binding 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
  2. Working with Observable Properties
  3. Working with Observable Arrays
  4. Handling User Click Events
  5. Handling Binding Context Changes (this post)
  6. Changing UI Appearances based on Bindings

 

When building applications which use the MVVM pattern it is common to have deep view model.  Working with a deep view model is not difficult but it becomes easier if we change change our binding context to remove some of the property chaining.

Take a look at the XAML below and notice how I am chaining the properties in my binding setup

image

In XAML this can be accomplished by setting the DataContext property on a given control as seen below:

image

Once you set the DataContext all child controls will have this set as their root context.

When working with Knockout you can accomplish the EXACT same result by utilizing the ‘with’ binder.

How to change Context Binding in Knockout

Take a look at the HTML markup below and notice who I am still using property chaining.

image

Now by using the ‘with’ binding in Knockout I can update my markup to look like below

image

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,

P.S. – Check out any one of my other Pluralsight courses

    1. InDepth Knockout Validation - Online Training Course for Developers
    2. HTML for the XAML Developer - Online Training Course for .NET Developers

Posted 10-14-2013 4:28 PM by Derik Whittaker

[Advertisement]

Comments

Jason Haley wrote Interesting Finds: October 15, 2013
on 10-15-2013 6:08 AM

Interesting Finds: October 15, 2013

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)