Getting started with knockout js

Today we will be seeing how to work with knockout js. Objective of this article is to quickly get you up and running with this MVVM framework.

So what is Knockout JS

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Some key things to understand:
1. observables:  model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.

2. observable array: If you want to detect and respond to changes on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. 

3. computed : these are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change.

For this article we will be creating a view model for simple ma thematic operations like addition, subtraction, multiplication etc...

This example can be seen here: http://designmantra.x10.mx/labs/KJS/observables.htm

The code for our view model looks as follows:

function mathematica(){

var self = this;

this.firstNumber = ko.observable(2);

this.secondNumber = ko.observable(3);

//Start off with computed values

this.addition = ko.computed(function(){

var add = this.firstNumber() + this.secondNumber()

return add;

},this);

this.substraction = ko.computed(function(){

return this.firstNumber() - this.secondNumber()

},this)

this.multiplication = ko.computed(function(){

return this.firstNumber() * this.secondNumber()

},this)

this.division = ko.computed(function(){

return this.firstNumber() / this.secondNumber()

},this)

this.squareRootFirst = ko.computed(function(){

return Math.sqrt(this.firstNumber())

},this);

//Compute the value multiplication table and assign it to the observable array

this.MultiplicationTableGenerate = ko.computed(function(){

var testArray = new Array();

for (var i = 0; i <= 10; i++) {

testArray[i] = i*this.firstNumber();

};

return testArray;

},this);

this.TableValue = ko.observableArray(this.MultiplicationTableGenerate());

this.recalculateTable = function(){

var inputtedNumber = document.getElementById("firstNumber").value;

this.firstNumber(parseInt(inputtedNumber));

var newArray = new Array();

for (var i = 0; i <= 10; i++) {

newArray[i] = i*inputtedNumber;

};

this.TableValue(newArray)

}

this.setFirstNumber = function() {

var inputtedNumber = document.getElementById("firstNumber").value;

this.firstNumber(parseInt(inputtedNumber));

}

this.setSecondNumber = function() {

var inputtedNumber = document.getElementById("secondNumber").value;

console.log(inputtedNumber);

this.secondNumber(parseInt(inputtedNumber));

}

}

in this code, we first create observables "firstNumber" and "secondNumber". Rest of the variables like addition, subtraction, etc are computed.

In case you’re wondering what the second parameter to ko.computed is (the bit where we passed this in the preceding code), that defines the value of this when evaluating the computed observable. Without passing it in, it would not have been possible to refer to this.firstNumber() or this.secondNumber().




To activate Knockout, add the following line to a 

var instant = new mathematica();
ko.applyBindings(instant)