In the lines of Backbone.js and Node.js, there’s yet another JavaScript library ‘KnockOut.js’ that’s been making noise in the development circles. KnockOut is a JS library that implements a Model-View-View Model(MVVM) pattern.
KnockOut helps you bind the data to the View components in our pages. For instance, if you want to update the UI when data is modified and vice-versa you don’t have to write code to implement that. Bind the UI components under observation with the data and KnockOut does rest of the job for you.
Let’s create a simple page that uses KnockOut. You will have a textbox where you enter the name of a country and click a button. The capital and continent of the country will be displayed in header tags. The screen shot is shown below.
The HTML UI code for the above is given below.
<html>
<head>
<title>KO example</title>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script>
function init() {
//KO code goes here
}
</script>
</head>
<body onload="init();">
Country <input type="text" data-bind="value: name"/>
<input type="button" value="Get info" data-bind="click: getInformation"/>
<h2 data-bind="html: capital"></h2>
<h2 data-bind="html: continent"></h2>
</body>
</html>
The heart of KnockOut is the “data-bind” attribute. You can see the data-bind attribute used in the <input> and <h2> elements. This attribute binds the data (name,capital,continent) with the properties(value,text) of the component. You will also notice the event registration of the Get info button using the data-bind attribute.
The init function is shown below.
function init(){
var country = {
name: ko.observable(""),
capital: ko.observable(""),
continent: ko.observable(""),
getInformation: function () {
if (this.name() == "UK") {
this.capital("London");
this.continent("Europe");
}
else if (this.name() == "India") {
this.capital("New Delhi");
this.continent("Asia");
}
else {
this.capital("Unknown");
this.continent("Unknown");
}
}
};
ko.applyBindings(country);//LINKS THE UI AND THE DATA
}
We have created a JSON object country with name, capital, continent and getInformation properties. The name, capital and continent properties have been declared as observables. The textboxes and header elements will observe these properties. Any changes to these properties will be reflected in the UI and vice-versa. The getInformation function is called when the button is clicked. It has a simple logic to compute the capital and continent. The line “ko.applyBindings(country);” takes care of updating the UI and the data with the values.
The “data-bind” attribute can be added dynamically to the HTML elements to keep the UI clean. KnockOut when used with jQuery can save time and effort in writing lot of code that deals with data display.