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.
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:
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.
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.
You can download the complete example from here or check it online from here: Example of Knockout-bound jQWidgets Integration with RequireJS.