Knockout Modal Binding

dialog.js

ko.bindingHandlers.dialog = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor()) || {};
            

            options.close = function() {
                allBindingsAccessor().dialogVisible(false);                        
            };
            
            $(element).dialog(options);          
        
            
            //handle disposal (not strictly necessary in this scenario)
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                 $(element).dialog("destroy");
             });   
        },
        update: function(element, valueAccessor, allBindingsAccessor) {
             var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible);
             $(element).dialog(shouldBeOpen ? "open" : "close");
             
        }
};
    
var Item = function(title) {
   this.title = ko.observable(title);
   this.isOpen = ko.observable(false);       
};

Item.prototype = {
    open: function() { this.isOpen(true); },
    close: function() { this.isOpen(false); }    
};
                        

var viewModel = {
    items: [
        new Item("one"),
        new Item("two"),
        new Item("three")
    ]
};

ko.applyBindings(viewModel, document.getElementById('app'));
        ​

index.html

<div id="app">
    <ul data-bind="foreach: items">
        <li>
            <a href="#" data-bind="text: title, click: open"></a>
            <div id="dialog" data-bind="dialog: {autoOpen: false, title: 'testing' }, dialogVisible: isOpen">
                <input data-bind="value: title" />
                <a href="#" data-bind="click: close">close</a>
            </div>
        </li>
    </ul>
    
    
    
    <hr/>
    
    <div data-bind="text: ko.toJSON($root)"></div>
</div>​

style.css

.header {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
}​