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
- Handling Binding Context Changes
- Changing UI Appearances based on Bindings (this post)
Anytime you build an application which has any type of visual complexity you are going to have the need to change the look and feel of UI elements based on data values. Your need may be as simple as needing to show or hide elements. It could also be as complicated as completely changing the appearance of the element.
When building applications in HTML w/ Knockout we can accomplish both of these needs in very similar ways ways to how XAML accomplishes these.
How to change Visibility State:
When working with a XAML application you can change an elements visibility by setting the Visibility attribute of an element to either Collapsed or Visible. Typically this is done via some sort of converter, normally one which converts a boolean to either visible or collapsed. The code below is an example of how this may look in a XAML application
When working with HTML and Knockout we can accomplish the exact same result but with less code. The reason we can use less code is because unlike XAML, Knockout uses a boolean to toggle state by default. In fact to set an element’s visible state we simply need to use the visible binder as seen below
When you compare the 2 options above you can see that the intent is exactly the same and their implementation is almost as well.
How to change an Elements Appearance:
When working XAML we have the ability to define the look and feel as an external style. We can then use binding and converters to dynamically apply a different style based on some setting. The code below will illustrate how to do this.
You can see in the example above I am binding the Status.Description value to the Style attribute. We are then are using a external converter to dynamically apply the style.
When working with HTML and Knockout we can accomplish this same task by using the css binder. See below for an example.
If you look at the example above, what we are doing is attempting to apply the ‘overdue’ css style to our element based on the evaluation of the bound Status property. If this returns true our CSS will be applied to the element, if false it will not be applied. Although CSS and Styles in XAML are not a 1 to 1 match they do expose the same basic concept, which is to apply styling information to a UI element.
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,
11-12-2013 8:34 AM