In this post we will take a look on why we need observable properties in Knockout.js

Before you read further this blog post, I would recommend you to read

Setting up Visual Studio for Knockoutjs Development

Create your First MVVM based JavaScript App in two simple steps using Knockoutjs

Inbuilt Bindings in Knockout.js: Controlling Text and Appearance

MVVM is, “When View Model changes View must be notified such that UI will be refreshed automatically

image

Let us try to understand Knockout feature Automatic UI Refresh with an example,

Let us create a simple ViewModel


var viewModel =
 {
 message: "Hello World",

 };

Now create a simple View. In View we are performing value and text binding on input and span element respectively.


<input type="text" data-bind="value:message" /> <br />
 <span data-bind="text:message" /> <br />

Now on running application, you will notice that when you change value in input textbox that value is not getting refreshed automatically on view.

image

To achieve automatic UI refresh, you need to create ViewModel properties as observable properties. You can create that as following,


var viewModel =
 {
 message: ko.observable("Hello World")

 };

Essentially you need to convert normal properties of ViewModel as observable properties to achieve automatic UI refresh.

image

Now on running application you will find that UI is getting refreshed automatically. You will notice that when you change value in input textbox that value is getting refreshed automatically on view.

clip_image001

Now these are the main tasks performed by observable properties

  • Notify about changes to subscribers
  • Automatically detect dependencies
  • To update view automatically

Reading ViewModel properties

You can read ViewModel property as below,


var m = viewModel.message();
 console.log(m);

Writing ViewModel properties

You can write ViewModel property as below,


viewModel.message("whatsup")

Writing multiple observable properties

KO allow you to write multiple observable property with chained syntax. Let us say we have a ViewModel as below,


var viewModel =
 {
 message: ko.observable("Hello World"),
 greet : ko.observable(23)
 };

And you want to update both properties. You can do that using chained syntax as below,

viewModel.message("whatsup").greet(45);
 var m = viewModel.message();
 var n = viewModel.greet();
 console.log(m);
 console.log(n);

So essentially we need observable properties in KO to achieve,

  • Two way binding
  • Notify the subscribers
  • Automatic refresh UI

I hope you find this post useful. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s