Knockout(KO) is a JavaScript library that helps you to
create rich, responsive display and editor user interfaces with a clean
underlying data model. KO provides a simple two-way data binding mechanism
between your data model and UI means any changes to data model are
automatically reflected in the DOM (UI) and any changes to the DOM are
automatically reflected to the data model.
Since Knockout is a purely client-side library, it has the
flexibility to work with any server-side technology (e.g., ASP.NET, Rails, PHP,
etc.), and any architectural pattern, database, whatever. As long as your
server-side code can send and receive JSON data — a trivial task for
any half-decent web technology
Key Concepts:
- Declarative Bindings - Easily associate DOM elements with model data using a concise, readable syntax.
- Automatic UI Refresh - When your data model's state changes, your UI updates automatically.
- Dependency Tracking - Implicitly set up chains of relationships between model data, to transform and combine it.
- Templating - Quickly generate sophisticated, nested UIs as a function of your model data.
Additional benefits:
- Declarative Bindings - Pure JavaScript library - works with any server or client-side technology.
- Can be added on top of your existing web application without requiring major architectural changes.
- Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms.
More Features:
- Free, open source.
- Pure JavaScript — works with any web framework
- Small & lightweight — 40kb minified. (... reduces to 14kb when using HTTP compression)
- No dependencies
- Supports all mainstream browsersIE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
Knockout.js uses a Model-View-ViewModel (MVVM) design
pattern in which the model is your stored data, and the view is the visual
representation of that data (UI) and ViewModel acts as the intermediary between
the model and the view.
Model <---------> View Model <---------> View
ViewModel is a JavaScript representation of the model data,
along with associated functions for manipulating the data. Knockout.js creates
a direct connection between the ViewModel and the view, which helps to detect
changes to the underlying model and automatically update the right element of
the UI.
Simple Example
1. View(HTML)
<h2>Your Seat reservations</h2>
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
2. View Model(Javascript)
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 10.11 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[1])
]);
}
ko.applyBindings(new ReservationsViewModel());
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 10.11 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[1])
]);
}
ko.applyBindings(new ReservationsViewModel());
3. OUTPUT
