Derik Whittaker



Leveraging your XAML MVVM Skills in HTML – Handling Click Events

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 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 (this post)
  5. Handling Binding Context Changes
  6. Changing UI Appearances based on Bindings


Once we understand how to setup our Data Context along w/ Observables we should learn how to handle user click events.  When following the MVVM pattern in XAML you would create a property in your bound view model which implements the ICommand interface and bind your button to this property as seen below.


Using this pattern is simple and easy.  One really great feature of the ICommand interface is the implementation of the CanExcute method.  This will enable or disable the user control based on the evaluation of a method in your view model.

Although Knockout does NOT have a direct 1 to 1 mapping for ICommand, we are able to achieve the exact same functionality within Knockout.

Knockout Bindings to handle user click events


The code above is pretty straight forward.  We are using ‘click’ bind and binding it to a method called ‘save’ in our underlying view model

Now, I mentioned that we do not have the 1 to 1 match for CanExecute in Knockout, this is true.  However, we can use the click binder in conjunction with the enable binder to achieve the exact same results

Knockout Bindings to enable/disable the User Control


As you can see from the code above we are still using the ‘click’ binder to bind to our save method but we are also using the ‘enable’ binder to bind to and evaluate the IsValid method.  If the evaluation returns true the control will be enabled, if it returns false, disabled.

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-10-2013 7:49 AM by Derik Whittaker



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

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)