Custom Observable in Knockout JS

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 same as observable but with our own functionality.

Why it is required to create custom observable?

Here, I would like to discuss about 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 all ok but suddenly I started facing 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 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


After applying numericObservable


Below is the code which will create your personalized observable

Use below code to declare your own numericObservable

Full example:


Yatendrasinh Joddha
I am a software engineer currently living in Gandhinagar, India. My interest is in web and software development. I am also interested in sharing my knowledge with people.

I have expertise in and related Microsoft technologies, with JavaScript frameworks and libraries like JQuery, KnockOut.js,and AngularJS.
Yatendrasinh Joddha on FacebookYatendrasinh Joddha on GithubYatendrasinh Joddha on LinkedinYatendrasinh Joddha on TwitterYatendrasinh Joddha on Wordpress

Leave a Reply

%d bloggers like this: