This is a multi-part excerpt series from my PluralSight course 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
- Setting up the Data Context
- Working with Observable Properties
- Working with Observable Arrays
- Handling User Click Events (this post)
- Handling Binding Context Changes
- 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
- InDepth Knockout Validation - Online Training Course for Developers
- HTML for the XAML Developer - Online Training Course for .NET Developers
10-10-2013 7:49 AM