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
Read Also: KnockoutJS MVVM Application Framework
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>