jQWidgets Integration with RequireJS & KnockoutJS

In this tutorial you will learn how to Integrate Knockout-bound jQWidgets with RequireJS. Before you proceed further, make sure you are familiar with the basic jQWidgets Integration with RequireJS tutorial. The example that will be showcased here is based on the Knockout demo ProgressBar.

1. Create a Project

As with the basic tutorial, we will create a "project", consisting of an .html page (index.html) and required CSS and JavaScript files (require.js, jquery.js, knockout.js, jqx-all.js, main.js and app.js). Here is the folder structure of our project:

2. index.html

Here is the code of the file index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of Knockout-bound jQWidgets Integration with RequireJS</title>
    <link rel="Stylesheet" href="css/jqx.base.css" type="text/css" />
    <script type="text/javascript" data-main="js/main" src="js/require.js"></script>
</head>
<body class='default'>
    <div data-bind="jqxProgressBar: {value: value, disabled: disabled, width: 400, height: 18}">
    </div>
    <table style='margin-top: 30px; margin-bottom: 10px;'>
        <tr>
            <td>
                Value
            </td>
            <td>
                <input data-bind="value: setValue" />
            </td>
        </tr>
    </table>
    <div data-bind="jqxCheckBox: {checked: disabled, width: '100px'}" style='margin-top: 10px;
        margin-bottom: 10px;'>
        Disabled</div>
</body>
</html>

The code includes a reference to the file require.js, whose data-main attribute points to main.js and the required data-bound HTML structure. More on main.js in Step 3.

3. main.js and app.js

Here is the code of the script main.js, which contains configuration options and loads the application module (the web page functionality, located in app.js): 

require.config({
    paths: {
        "jquery": "jquery",
        "knockout": "knockout",
        "jqx-all": "jqx-all"
    },
    shim: {
        "jqx-all": {
            export: "$",
            deps: ["jquery", "knockout", "app"]
        }
    }
});
require(["jquery", "knockout", "app", "jqx-all"], function ($, ko, App) {
    $("#document").ready(function () {
        ko.applyBindings(new App(33));
    });
});

Note that you need to include "jquery", "knockout", "app" and "jqx-all" to the array of required modules (scripts).

And here is the code of app.js: 

define(["knockout"], function (ko) {
    var root = (typeof window === "object" && window) || this;
    root.ko = ko;
    return function App(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
        });
        this.disabled = ko.observable(false);
    };
});

Note that jqxknockout.js, the script that adds Knockout support to jQWidgets (part of jqx-all.js), takes the ko dependency from window. That is why we need to set the window.ko to the ko parameter of the callback of the define RequireJS function (the first two lines of code). This is essential to the successful integration of Knockout-bound jQWidgets with RequireJS.

The rest of the app.js is based on the aforementioned demo ProgressBar. The value parameter (which is passed to the App function in main.js) determines the initial value of the progress bar.

4. Download the Example or Try It Out

You can download the complete example from here or check it online from here: Example of Knockout-bound jQWidgets Integration with RequireJS.