Why we need Observable Properties in Knockout.js

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 may be NSFW.
Clik here to view.

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 may be NSFW.
Clik here to view.

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 may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.