Over a million developers have joined DZone.

Leveraging your XAML MVVM Skills in HTML – Working with Observable Properties

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 six 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 applications with Knockout JS

Series Table of Context

  1. Setting up the Data Context 
  2. Working with Observable Properties (this post)
  3. Working with Observable Arrays
  4. Handling User Click Events
  5. Handling Binding Context Changes
  6. Changing UI Appearances based on Bindings

Once we have our data context set up, the next logical step is to look at how to set up observable properties and bind them to UI elements. When working in XAML applications you would set up your properties as seen below:

How to set up observable properties in XAML

 image

The property above is pretty straightforward. We have a string property, which has a backing field, and inside our Setter we are going to raise change notification for the given field to notify the UI that the display element needs to refresh to show the updated data.

Once we have our property set up, we bind it to our UI elements as seen below:

image 

How do we accomplish the same goal when using KnockoutJs?

How to set  up the Observable Properties in Knockout Js

image

The image above is the 1 to 1 equivalent to setting up our observable property in Knockout

Breaking down this code (this code is in TypeScript).

  1. We first declared our observable property
  2. Next we need to initialize it, which we are doing with ko.observable()

Now that we have our property set up, we need to bind it to our UI. I can do this by using the knockout data-bind syntax as seen below

image

As you can see, setting up your Observable Properties in Knockout is very similar to setting up the Observable Properties in a XAML based applications.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

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