KnockoutJS – Observables


KnockoutJS – Observables

”;


Previous

Next

KnockoutJS is build upon the following 3 important concepts.

  • Observables and dependency tracking between them – DOM elements are connected to ViewModel via ”data-bind”. They exchange information through Observables. This automatically takes care of dependency tracking.

  • Declarative Bindings between UI and ViewModel – DOM elements are connected to ViewModel via ”data-bind” concept.

  • Templating to create re-usable components – Templating provides a robust way to create complex web applications.

We will study Observables in this chapter.

As the name specifies, when you declare a ViewModel data/property as Observable, any data modification each time automatically gets reflected at all places the data is used. This also includes refreshing the related dependencies. KO takes care of these things and there is no need to write extra code to achieve this.

Using Observable, it becomes very easy to make UI and ViewModel communicate dynamically.

Syntax

You just need to declare ViewModel property with function ko.observable() to make it Observable.

this.property = ko.observable(''value'');

Example

Let”s take a look at the following example which demonstrates the use of Observable.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

The following line is for the input box. As can be seen, we have used data-bind attribute to bind yourName value to ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

The following line just prints the value of yourName. Note, that here data-bind type is the text as we are simply reading the value.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

In the following line, ko.observable keeps an eye on yourName variable for any modification in data. Once there is a modification, the corresponding places also get updated with the modified value. When you run the following code, an input box will appear. As and when you update that input box, the new value will get reflected or refreshed in places wherever it is used.

this.yourName = ko.observable("");

Output

Let”s carry out the following steps to see how the above code works −

  • Save the above code in first_observable_pgm.htm file.

  • Open this HTML file in a browser.

  • Enter the name as Scott and observe that the name is reflected in the output.