Categories: KnockoutJS

About KnockoutJS

In this tutorial you will get the basic knowledge of KnockoutJS and how to use on programming.

Basically it is a JavaScript library based on MVVM pattern i.e. Model-View-View-Model by which developer build rich and responsive websites.

It separates the application model, view and view model.

It supports most of browsers i.e. Firefox 3.5+, IE 6+, Opera, Chrome, Safari.

Steve Sanderson, a Microsoft employee on July5, 2010 developed KnockoutJS and maintained as a open source project.

Abbreviation for KnockoutJS is KO.

Features of KnockoutJS:

Open source and free for use.
Extensible
Template
Automatic UI refreshing
Binding easily
Dependency tracking
Compatible with client or server side technologies
Small & lightweight

How to use:
Download production build of Knockout.js from:
http://knockoutjs.com/downloads/index.html

Now paste it in your webpage head tag as:
<script type=’text/javascript’ src=’knockout-3.3.0.js’></script>
or you can use KnockoutJS library from CDN:
<script src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js” type=”text/javascript”></script>

Lets look a simple example:

<!DOCTYPE html>
 <head>
 <title>About KnockoutJS</title>
 <!-- We have added the KnockoutJS library-->
 <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
 </head>
 <body>
 <!-- two input boxes First Name and Last Name initialized in model with "John" and "Doe" -->
 <p>First Name: <input data-bind="value: firstName" /></p>
 <p>Last Name: <input data-bind="value: lastName" /></p>
 <!-- get the value from model observable from input element -->
 <p>First Name: <strong data-bind="text: firstName">Hi</strong></p>
 <p>Second Name: <strong data-bind="text: lastName">There</strong></p>
 <p>Full Name: <strong data-bind="text: fullName"></strong></p>
 <script>
 function AppViewModel() {
 <!-- firstName and lastName refers to ViewModel variable. -->
 <!-- ko.observable keeps an eye on value changes for updating ViewModel data -->
 this.firstName = ko.observable("John");
 this.lastName = ko.observable("Doe");
 <!-- this is computed function in viewmodel which concat two variable -->
 this.fullName = ko.computed(function() {
 return this.firstName() + " " + this.lastName();
 }, this);
 }
 ko.applyBindings(new AppViewModel());
 </script>
 </body>
 </html>

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.