Two way data binding is a new concept for ASP.NET developers.
Typically in web forms you might have bound to a GridView, DropDownList etc.
This is one way binding. Once you bound the data to a control the data changes
in the control are not reflected back to your source. For WPF or XAML
developers two way data binding is a common concept. They embraced this binding
from long time using the MVVM design pattern.
Knockout brought this two way MVVM data binding to the web.
Knockout enables you bind your web controls in javascript. Once bound you can
change the control values without DOM manipulation. Also the user changes are
directly reflected in your model. In some situations Knockout also replaces you
need for JQuery for DOM manipulation. Please note that this binding is done in
javascript and is on the browser. ASP.NET MVC or Web Forms on the server side
does not have the two way binding.
In this blog I will show a small example on how to do the
two way data binding in javascript and manipulate the DOM and model objects.
As you see in the below screenshot there are two textboxes
and a label. The label shows the full name entered in textboxes.
Whenever user changes any of the first name or last name
textboxes the full name will automatically change. This is due to the magic of
two way binding with Knockout.
Let’s see how to setup this two way binding.
First you need to download the latest version of Knockout.
Which can be downloaded from its website
Here is the code using the two way binding
<html>
<head>
<title>Two-way Data binding with Knockout</title>
<script src="Scripts/knockout-3.0.0.js"></script>
</head>
<body>
<h2>Person</h2>
First Name: <input type="text" data-bind="value: firstName" /><br />
Last Name: <input type="text" data-bind="value: lastName" /><br />
Full Name: <span data-bind="text:
fullName"></span>
<script>
var person = function (first, last) {
self = this;
firstName = ko.observable(first);
lastName = ko.observable(last);
fullName = ko.computed(function () {
return firstName() + "
" + lastName();
});
}
ko.applyBindings(new person("Prasanna", "Kumar"));
</script>
</body>
</html>
Here are the salient points from the above code
- We first a ViewModel which stores the data. In the above example, person is the view model, with three properties, firstName, lastName and fullName. fullName is a computed field.
var person = function (first, last) {
self = this;
firstName = ko.observable(first);
lastName = ko.observable(last);
fullName = ko.computed(function () {
return firstName() + "
" + lastName();
});
}
return firstName()
Last Name: <input type="text" data-bind="value:
lastName" />
Full
Name: <span data-bind="text: fullName"></span>
ko.applyBindings(new person("Prasanna", "Kumar"));
As you see Knockout made two-way binding very easy and with
minimal syntax we were able to effectively do a two-way binding.
No comments:
Post a Comment