Over a million developers have joined DZone.

Leveraging your XAML MVVM Skills in HTML – Handling Click Events

DZone's Guide to

Leveraging your XAML MVVM Skills in HTML – Handling Click Events

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 to show you how 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 Contents

  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 set up 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 straightforward. 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.

Until 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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}