As a part of my previous project I had a chance of learning and working with KonckoutJS which one of the popular client side javascript frameworks. In this post I am going to write about my understanding of various features KO offer.
What is Konckout?
KnockoutJS is a Javascript MVVM framework. The term MVVM stands for Model-View-ViewModel.
- Model – is the business entity, essentially the one save on server and processed by server
- View – is the User Interface that end user sees and interacts with
- ViewModel – It sits between the View and Model which is comprised of data and behavior for wiring up UI interactions to the model in the back-end
Using KO we can create the ViewModels in java-script which can react to changes from either side (View or Model) and provide a responsive user experience.
There are four main key concepts offered by KO:
- Declarative Bindings – It is extremely easy to bind DOM elements underlying view model. KO uses the HTML’s data-* attribute to achieve this. The syntax is clear, concise and readable.
- Dependency Tracking – Implicitly set up chains of relationships between model data, to transform and combine it.
- Automatic UI refresh – As view model is bound to DOM element(s), it tracks any changes made to the underlying model and reacts to it by refreshing UI real time
- Templating – The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures – possibly with repeating or nested blocks – as a function of your view model data.
As one can see, everything in KO revolves around a view model. Here is how we create a simple ViewModel in KO. This code creates a simple form to enter firstName and lastName and upon adding displays on the list
//ViewModel.js
var data = [{
name: "Bob"
}, {
name: "Jane"
}, {
name: "Joe"
}];
function ViewModel() {
var self = this;
self.list = ko.observableArray(data);
self.addItem = function() {
self.list.push({
name: "Sarah"
});
};
self.removeItem = function() {
self.list.pop();
};
};
ko.applyBindings(new ViewModel());
//name.html
...
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>
<ul data-bind="template: { name: 'listTempl', foreach: list}">
</ul>
…
The features offered by KO are:
- Observables
- Regular Observables – an object when declared as observable and is bound to DOM element, when any change is made to the object, it is reflected to the UI
- Observable Arrays – Reacts to any changed made to array such as addition or removal of items to and from the array
- Computed Observables – these depend upon more than one observable
- Bindings
- Built-in bindings
- related to text and appearance : visible, text, html, css, style, attr (the catch all binding for text and appearance)
- related to form: click, submit, enable, disable, value, textInput, hasFocus, checked, options, selectedOptions, uniqueName
- related to control flow: foreach, if, ifnot, with, component
- related to template: template
- Custom binding: Custom bindings provide extensibility points in KO, in that if there is any requirement which cannot be fulfilled by built in bindings and if you want to provide a customized reusable behavior upon some action; we can make use of custom bindings
- Built-in bindings
ko.bindingHandlers.customBindingName = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel){
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel){
}
};
- Components: TBD
- Utilities (ko.utils)
- Array utilities : arrayFilter, arrayFirst, arraForEach, arrayIndexOf, arrayMap, arrayPushAll, arrayRemoveItem, compareArrays
- Observable utilities : unwrapObservable
- Data Features
- ko.toJS() – removes all KO constructs from object and converts to regular JS object
- ko.toJSON() – removes all KO constructs and converts to json
References:
