What is Knockout?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. Knockout framework is based on the MVVM design pattern.

What is MVVM?

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It splits the User Interface into three conceptual parts:

• Model: your application’s data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using Knockout, you will usually make Ajax calls to some server-side code to read and write this stored model data.
• View Model: a code representation of the data and UI operations. For example, if you’re implementing a Grid, your view model would be an object holding a list of items, and exposing methods to add, remove or update items.
• View: this is the UI. The View gets all the user input and forwards it to the viewmodel. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

jQWidgets with Knockout

jQWidgets provides a plug-in called jqxknockout.js which enables you to use the widgets with Knockout. In order to use jQWidgets with Knockout, you need to do the following:
1. Add references to jQuery framework, Knockout .js, and the jqxknockout.js plug-in.

<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>

2. Add references to the widgets and theme files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script>

3. Create the ViewModel.

var viewModel = function (value) {
    this.value = ko.observable(value);
    this.setValue = ko.computed({
        read: this.value,
        write: function (value) {
            if (!isNaN(value))
                this.value(parseFloat(value)); // Write to underlying storage
        },
        owner: this
    });
};

4. Create the View and on the widgets to the ViewModel.

<div data-bind="jqxProgressBar: {value: value, width: 400, height: 18}"/>

5. Activate Knockout.

ko.applyBindings(new viewModel(50));