Knockout-jQueryUI

Fork me on GitHub

Installation

Knockout-jQueryUI can be installed either by using bower, or by downloading one of the github-hosted releases. The bower package name is knockout-jqueryui: 

bower install knockout-jqueryui --save-dev

The library has separate builds for referencing it in a script tag and for using its binding handlers as AMD modules.

Script tag

Include the script after jQuery, jQuery UI and Knockout: 

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="lib/knockout-jqueryui/knockout-jqueryui.js"></script>

AMD

The binding handlers are separate AMD modules which only depend on the related jQuery UI widgets. The simplest case is when jQuery UI is also modularized. As of jQuery UI 1.11, all of the library's source files are AMD modules. You can also modularize the earlier versions using the https://github.com/jrburke/jqueryui-amd tool.

Directory Structure

Now arrange the files into a similar directory structure: 

├── index.html
├── app
│   ├── main.js
│   └── viewModel.js
└── lib
    ├── jquery
    │   └──  jquery.min.js
    ├── jquery-ui
    │   ├── accordion.js
    │   ├── autocomplete.js
    │   ├── ...
    │   └── tooltip.js
    ├── knockout
    │   └──  knockout-3.1.0.js
    ├── knockout-jqueryui
    │   ├── accordion.js
    │   ├── autocomplete.js
    │   ├── ...
    │   └── tooltip.js
    └── requirejs
        └──  require.js

Loading the Application

Your index.html should look like this: 

<html>
    <head>
    </head>
    <body>
        ...
        <script src="lib/requirejs/require.js" data-main="app/main"></script>
    </body>
</html>

RequireJS Configuration

You have to configure RequireJS and bootstrap your application in app/main.js: 

require.config({
    paths: {
        'jquery': 'lib/jquery/jquery.min',
        'jquery-ui': 'lib/jquery-ui',
        'knockout': 'lib/knockout/knockout-3.1.0',
        'knockout-jqueryui': '/lib/knockout-jqueryui'
    }
});

require(['knockout', 'app/viewModel'], function (ko, ViewModel) {
    ko.applyBindings(new ViewModel);
});

Using the Modules

Now you can require the individual bindings in the view model's module. The bindings declare dependencies to the appropriate jQuery UI modules, you don't need to explicitly require them. 

define(['knockout', 'knockout-jqueryui/button'], function (ko) {
    var ViewModel = function () {
        ...
    };
    ...
    return ViewModel;
});

Example

There is an example setup in the project's github repository.