Brief – KonckoutJS

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:

  1. 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.
  2. Dependency Tracking – Implicitly set up chains of relationships between model data, to transform and combine it.
  3. 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
  4. 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

var data = [{
 name: "Bob"
}, {
 name: "Jane"
}, {
 name: "Joe"

function ViewModel() {
  var self = this;
  self.list = ko.observableArray(data);
  self.addItem = function() {

    name: "Sarah"
 self.removeItem = function() {

ko.applyBindings(new ViewModel());

<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: { name: 'listTempl', foreach: list}">

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
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