Knockout-jQueryUI

What makes it different

There are several knockout bindings for jQuery UI widgets, madcapnmckay's Knockout-UI, thelinuxlich's knockout_bindings and medmunds' knockout-jquery-ui-widget.js to name a few. Below are some features which differentiates knockout-jqueryui from them.

Binding factory

Each binding is generated by the same binding factory, similarly to rniemeyer's knockout-kendo. This ensures that the size of the library remains small and makes it a lot easier to maintain/extend at the same time. The binding factory also provides extension points to which the bindings can hook their own functions to execute widget-specific initialization logic.

Fast

The bindings set only those options which has been changed since the last update.

Proper disposal

When an element is removed from the DOM (typically by an ancestor template binding) onto which a knockout-jquery binding is applied, then the binding destroys the widget.

As a workaround for IE7's z-index bug, the dialog widget's constructor moves its element from its original position to the end of the DOM tree. Knockout-jqueryui's dialog binding will properly dispose the widget when some of its original ancestor node is removed (typically by an if/with/foreach binding).

Synchronous operation

A common design pattern for container-like bindings is to execute their initialization- and update logic asynchronously. This ensures that their descendant elements' bindings are applied prior to their own initialization/update. Unfortunately this makes following the execution path harder while debugging.

Knockout-jqueryui takes a different route, its bindings explicitly invoke ko.applyBindingsToDescendants() before creating their widget.