Knockout is a library designed for Model-View-ViewModel(MVVM) development. Knockout provides three necessary components to implement this pattern, a declarative syntax for the view(data-bind Html attribute), a mechanism to nitify changes from the viewmodel(Observable object), and a data binder to mediate between the two(Ko binding handler).
What is Observables: Observable are JavaScript functions that record subscribers reading their value, and then calling these subscribers when the value has been changed. Knockout uses dependency tracking mechanism for change tracking.
var total = viewModel.total() // reading value in knockout
[Here, viewModel = your JS viewmodel, total is a property of the view model]
viewModel.total(40); // write new value to knockout observable property.
[here, “total” is an observable property ]
Observable Array:
An Observable array just tracks which objects it holds, and notifies listeners when objects are added and removed.
this.users = ko.observableArray();
like observables, observableArrays can be constructed with an initial value. You can access an observable by calling it or setting its value by passing it a parameter. With observable arrays it’s little different. The value of the array is its reference, so setting that value would change the entire array.
Let’s understand the difference between this.users() and this.user in observableArrays.
My oberservalbe array is
this.users = ko.observableArray();
now I want to operate on that array by adding or removing elements, consider the following section.
this.users().push(new User(“John”));
by calling this.users(), the underlying array is retrieved before a new user is pushed to it. Knockout is not aware that the array was changed, as the change was made to the array itself and not the observable. So to allow knockout to properly track changes, the changes need to be made to the observable, not the underlying value.
Now consider this scenario.
this.users.push(new User(“John”));
notice that instead of retrieving the array from the observable, we are calling push directly on the observable. This will ensures that subscribers are notified of the change with an updated array.
Detailed Example: Adding/Updating/Removing objects from an ObservableArray
ObservableArray In JsFiddle
Computed Observable:
Knockout observables are properties that are set manually, either through your code or by bindings from the User Interface or Form. But computed observables are properties that automatically update their value by responding to changes in their dependencies.
Here is a sample code of how to create and calculate computed observables.
var ComputedSample = function() {
var self = this;
self.subtotal = ko.observable(10);
self.tax = ko.observable(0.04);
self.total = ko.computed(function() {
var subtotal = parseFloat(self.subtotal()),tax = parseFloat(self.tax());
return subtotal * (1 + tax);
});
};
Detailed Example : In JsFiddle