KnockoutJS Computed Observables
KnockoutJS automatically update user interface ,if there is change in viewmodel. But the question is how KnockoutJS knows that what value change. Observable is a property model which able to notify the change in viewmodel.Computed observable is a kind of function that depend upon one or more underline observable.If inner observable dependency is changed , computer observable update automatically. Below is a Syntax of computer possible.
KnockoutJS automatically update user interface ,if there is change in viewmodel. But the question is how KnockoutJS knows that what value change. Observable is a property model which able to notify the change in viewmodel.Computed observable is a kind of function that depend upon one or more underline observable.If inner observable dependency is changed , computer observable update automatically. Below is a Syntax of computer possible.
this.VariableName
= ko.computed(function
()
{
//statement
return
//
return value
},
this);
Example
Here list of observable
In the example we are accepting three input.
Here are the observable variables which was initialized by zero.
this.Length = ko.observable("0");
You have already notice,with input "Length" and "width", the area is calculated and if you input "Square Unit Value" , the price is calculated. You have also notice that , we have not call function When input value is changed , the corresponding observable notify its dependencies.If underline observable changed the corresponding computed observable of the works automatically.
Self
You have already noticed , that the variables in viewmodels referred by this. "this" is a reference keyword which is used to collect the data from current view model.You can use self instead of this.Self hold the reference of this.
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<table>
<tr>
<td>
Length
:
</td>
<td>
<input
data-bind="value:
Length"
/>
</td>
</tr>
<tr>
<td>
Width
:
</td>
<td>
<input
data-bind="value:
Width"
/>
</td>
</tr>
<tr>
<td>
Square
Unit Value :
</td>
<td>
<input
data-bind="value:
sqval"
/>
</td>
</tr>
<tr>
<td>
Area
:
</td>
<td>
<strong
data-bind="text:
AreaString"></strong>=<strong
data-bind="text:
Area"></strong>
</td>
</tr>
<tr>
<td>
Price
:
</td>
<td>
<strong
data-bind="text:
Amount"></strong>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<script>
<!--
"viewmodel"--
>
function
AppViewModel()
{
this.Length
= ko.observable("0");
this.Width
= ko.observable("0");
this.sqval
= ko.observable("0");
this.AreaString
= ko.computed(function
()
{
return
this.Length()
+ "X"
+ this.Width();
},
this);
this.Area
= ko.computed(function
()
{
return
this.Length()
* this.Width();
},
this);
this.Amount
= ko.computed(function
()
{
return
this.Length()
* this.Width()
* this.sqval();
},
this);
}
//
Activattion code
ko.applyBindings(new
AppViewModel());
</script>
</body>
Output :
Here list of observable
In the example we are accepting three input.
Here are the observable variables which was initialized by zero.
this.Length = ko.observable("0");
this.Width
= ko.observable("0");
this.sqval
= ko.observable("0");
Here list of Computed observable
Here is the list of computed observable .You have noticed that we have not called this computed observable. This computed observable fire automatically when a change is made in underlying observable variables. Computed observable are functions specific name.
this.AreaString = ko.computed(function () {
....
}, this);
this.Area = ko.computed(function () {
....
}, this);
this.Amount = ko.computed(function () {
....
}, this);
Here list of Computed observable
Here is the list of computed observable .You have noticed that we have not called this computed observable. This computed observable fire automatically when a change is made in underlying observable variables. Computed observable are functions specific name.
this.AreaString = ko.computed(function () {
....
}, this);
this.Area = ko.computed(function () {
....
}, this);
this.Amount = ko.computed(function () {
....
}, this);
You have already notice,with input "Length" and "width", the area is calculated and if you input "Square Unit Value" , the price is calculated. You have also notice that , we have not call function When input value is changed , the corresponding observable notify its dependencies.If underline observable changed the corresponding computed observable of the works automatically.
You have already noticed , that the variables in viewmodels referred by this. "this" is a reference keyword which is used to collect the data from current view model.You can use self instead of this.Self hold the reference of this.
The Below example show how self can be used instead of this.
Example
Pure Computed Observables
Pure computed observables introduced in knockoutHs 3.2.0. It does not maintain subscriptions to its dependencies when it has no subscription itself. Results to prevent memory leak and provide performance over memory benefit. It also reduce computation overhead not recalculating computed observable whose value is not being observed. It has two state when it has no change it is sleeping any change it is listening state. It do simply calculation ,it will not directly modifying other object or state. Is simply Calculation and return the value. You can verify Pure computed observables.
The following are the properties in Computed Observables:
1)ko.isComputed :returns
2)ko.isObservable :returns
3)ko.isWritableObservable :returns
Writable Computed Observables
Generally computed observable have value that is computed from other observable, and hence it is read only. KnockoutJS offers writable computed observable. You just need to supply your own callback function.
Below is the example of writable computed observable.
One can assign values to many Observables or Computed Observable properties using the chaining syntax as follows.
myViewModel.fullName('John Reach').age(20)
Example
Example
<!DOCTYPE
html>
<body>
<script
src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type="text/javascript"></script>
<table>
<tr>
<td>
Length
:
</td>
<td>
<input
data-bind="value:
Length"
/>
</td>
</tr>
<tr>
<td>
Width
:
</td>
<td>
<input
data-bind="value:
Width"
/>
</td>
</tr>
<tr>
<td>
Area
:
</td>
<td>
<strong
data-bind="text:
AreaString"></strong>
</td>
</tr>
</table>
<script>
function
AppViewModel()
{
self
= this;
self.Length
= ko.observable("0");
self.Width
= ko.observable("0");
self.AreaString
= ko.computed(function
()
{
return
self.Length() + "X"
+ self.Width();
},
self);
}
ko.applyBindings(new
AppViewModel());
</script>
</body>
Output :
Pure Computed Observables
Pure computed observables introduced in knockoutHs 3.2.0. It does not maintain subscriptions to its dependencies when it has no subscription itself. Results to prevent memory leak and provide performance over memory benefit. It also reduce computation overhead not recalculating computed observable whose value is not being observed. It has two state when it has no change it is sleeping any change it is listening state. It do simply calculation ,it will not directly modifying other object or state. Is simply Calculation and return the value. You can verify Pure computed observables.
ko.isPureComputed — returns true for pure computed observables. The following are the properties in Computed Observables:
1)ko.isComputed :returns
true for all computed observables. 2)ko.isObservable :returns
true for observables, observable arrays, and all computed observables. 3)ko.isWritableObservable :returns
true for observables, observable arrays, and writable computed observables.Writable Computed Observables
Generally computed observable have value that is computed from other observable, and hence it is read only. KnockoutJS offers writable computed observable. You just need to supply your own callback function.
Below is the example of writable computed observable.
One can assign values to many Observables or Computed Observable properties using the chaining syntax as follows.
myViewModel.fullName('John Reach').age(20)
Example
<!DOCTYPE
html>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type="text/javascript"></script>
<span>First
Name :<input
type="text"
data-bind="value:
firstName"
/></span><br
/>
<span>Last
Name :<input
type="text"
data-bind="value:
LastName"
/></span><br
/>Full
Name : <strong
data-bind="text:
FullName"></strong>
<script>
var
myViewModel = function
()
{
var
self = this;
self.firstName
= ko.observable("Enter
First Name");
self.LastName
= ko.observable("Enter
Last Name");
self.FullName
= ko.computed({
read:
function
() { return
self.firstName() + ",
"
+ self.LastName(); },
write:
function
(value) {
var
nameAndTitle = value.split(',
');
self.firstName(FullName[0]);
self.LastName(FullName[1]);
}
});
};
ko.applyBindings(new
myViewModel());
</script>
</body>
Output :
