Working with Knockout.js

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 browsers
  IE 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>

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());

3. OUTPUT