Over a million developers have joined DZone.

Leveraging your XAML MVVM Skills in HTML – Handling Click Events

· Web Dev Zone

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 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.

image

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

image

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

image

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
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 }}