Post
Ask Question

Custom Observable In KnockoutJS

 Introduction

Knockout JS is famous and widely used for its two-way binding concept. While developing application we uses ko.observable() to declare a knockout object. Here we will discuss how to create our own custom observable which will work the same way as observable but with our own functionality.

Why it is required to create custom observable?

Here, I would like to discuss a scenario where I choose to create my own observable.

While developing one application I created one observable which was intended to store numeric value, and I used to store that numeric value in database using WebApi. It was going okay but suddenly I started facing a typecasting error while storing that value using my WebApi, then I realized that the value I am passing is in string format. This was happening because I started taking value from user using Textbox which always gives me the value in string format. So, I decided to create my own observable which will always have numeric value even it is coming from Textbox.

Let’s create our own numericObservable

Look at the below Before and After outputs

Before applying numericObservable

Knockout JS

After applying numericObservable

Knockout JS

Below is the code which will create your personalized observable 

  1. ko.numericObservable = function (initialValue) {  
  2.         var actual = ko.observable(initialValue);  
  3.         var result = ko.dependentObservable({  
  4.             read: function () {  
  5.                 return actual();  
  6.             },  
  7.             write: function (newValue) {  
  8.                 var parsedValue = parseFloat(newValue);  
  9.                 actual(isNaN(parsedValue) ? newValue : parsedValue);  
  10.             }  
  11.         });  
  12.         return result;  
  13.     };  

Use below code to declare your own numericObservable

  1. self.Number = ko.numericObservable();  

Full example,

  1. <html>  
  2. <head>  
  3.     <title> </title>  
  4.     <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>  
  5. </head>  
  6. <body>  
  7.     <div id="MainDIV">  
  8.         <input type='text' data-bind="value: Number"/>  
  9.         <input type='button' data-bind="click: checkType" value='Check'/>  
  10.         </div>  
  11.     <script>  
  12.     ko.numericObservable = function (initialValue) {  
  13.         var actual = ko.observable(initialValue);  
  14.         var result = ko.dependentObservable({  
  15.             read: function () {  
  16.                 return actual();  
  17.             },  
  18.             write: function (newValue) {  
  19.                 var parsedValue = parseFloat(newValue);  
  20.                 actual(isNaN(parsedValue) ? newValue : parsedValue);  
  21.             }  
  22.         });  
  23.         return result;  
  24.     };  
  25.     var KOModel = function () {  
  26.         var self = this;  
  27.         self.Number = ko.numericObservable();  
  28.         self.checkType = function(){  
  29.             alert(typeof (self.Number()));  
  30.         };  
  31.     }  
  32.     ko.applyBindings(KOModel, document.getElementById('MainDIV'));  
  33.     </script>  
  34. </body>  
  35. </html>  

Summary

Using this example you can create your custom observable of any type.


Similar Articles