Knockout JQuery UI Selectable Binding

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="main">
     <ul id="selectable" data-bind="foreach: requests">
         <li class="ui-widget-content" data-bind="selectableItem: selected"><span data-bind="text: id"></span><span data-bind="text: selected"></span></li>
    </ul>
</div>

CSS

#selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

(function () {
    ko.bindingHandlers.selectableItem = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var selectable = $(element).parent();
            
            selectable.bind('selectableselected', function(event, ui) {
                if(ui.selected === element) {                
                    var value = valueAccessor();
                
                    value(true);
                }
            });
            
            selectable.bind('selectableunselected', function(event, ui) {
                if(ui.unselected === element) {                
                    var value = valueAccessor();
                
                    value(false);                
                }
            });
        },
        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var el = $(element);
            
            if(valueAccessor()()) {
                el.addClass('ui-selected');
            } else {
                el.removeClass('ui-selected');
            }
        }
    };
    
    var requestItem = function(id, selected) {
        this.id = id;
        this.selected = ko.observable(selected);
    };        
      
    var viewModel = {
        requests: ko.observableArray([
            new requestItem('some', true), 
            new requestItem('other', false)])
     };

    //bind selectable first
    $('#selectable').selectable();
    
    // Activates knockout.js
    ko.applyBindings(viewModel);
})();