How to do two way Data Binding in Knockoutjs

Posted By : Rajan Rawat | 02-Dec-2016

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

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

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