Knockout-jQueryUI

Fork me on GitHub

Dialog.html

Open content in an interactive overlay.

Parameters

For each of the widget's options the binding has a corresponding option with the same name. These can be set to static values, or bound either to normal or to observable properties of the viewmodel.

For each of the widget's events the binding has a corresponding option with the same name. These can be set to functions. When invoked the value of the this keyword evaluates to the viewmodel.

widget

Should be bound to one of the viewmodel's writeable observables. The binding will write a jQuery object containing the binding's DOM element into it. The primary use for this option is to invoke the widget's methods on the element.

isOpen [two-way binding]

Controls whether the dialog is visible.

Notes

jQuery UI moves the dialog element to the end of the HTML body. This causes knockout to throw the following exception:

You cannot apply bindings multiple times to the same element.

The workaround is to do the ko.applyBindings() on a wrapper div instead of the HTML body. This way jQuery UI will move the dialog's element after the wrapper div, and knockout won't try to bind it again: 

<body>
    <div id="wrapper">
        ...
        <div data-bind="dialog: {...}"></div>
        ...
    </div>
    <script type="text/javascript">
        ko.applyBindings(new ViewModel(), document.getElementById('wrapper'))
    </script>
</body>

Example

HTML

<input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'">
<div data-bind="dialog: { isOpen: isOpen }">
  <p data-bind="text: text"></p>
</div>
<button data-bind="click: open, disable: isOpen">Open</button>

JavaScript

var ViewModel = function () {
  this.isOpen = ko.observable(false);
  this.text = ko.observable('Lorem ipsum dolor sit amet.')
};
ViewModel.prototype.open = function() {
  this.isOpen(true);
};

Result