How to do two way Data Binding in Knockoutjs

Posted By : Rajan Rawat | 02-Dec-2016

Knockout JS

TWO WAY BINDING IN KNOCKOUTJS

So far in the Knockout.js, we have seen simple data binding and how Automatic Updates observables how to use data binding element. But the real power of mining the two-way data binding support.

What do you mean by two-way data binding in knockoutjs?

Price based on a data source control and the ability to update data source control to bind . ASP.NET developers are familiar with the concept of data binding. Allows two-way binding to update data source control.

Let's take an example of Two way binding in Knockoutjs to illustrate this point, we have developed  two terms here Figure 1 and Figure 2. So you can understand easily the difference html and knockoutjs.

Figure 1: Adding an input element and using the value binding

image

In this example we are now binding the personName observable to the input box’s value property.But this is not editable now let make it ediatble by Two way binding see the figure 2.

Figure 2: Two way data-binding example

image

If we run this in a browser, the span’s text will initially show you the input value BOB as the input box’s value property. but we can change the value of input because we are using two way binding. So the input’s value is editable by the user. 

 

OUTPUT OF THE FIGURE 2

image

 

THANKS

About Author

Author Image
Rajan Rawat

Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.

Request for Proposal

Name is required

Comment is required

Sending message..