Combobox change not firing

http://stackoverflow.com/questions/9333911/knockoutjs-data-bind-value-on-jqueryui-combobox

by bullrout

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
<script src="http://mjf.me/Random/jquery-ui-combobox.js"></script>
<select data-bind="combobox: optionValue">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>                        
</select>

<hr/>

<div data-bind="text: optionValue"></div>

<hr/>

<select data-bind="value: optionValue"><option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>                        
</select>

CSS

.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; width: 140px; }
ul.ui-widget {font-size: 0.7em;}
input.ui-widget {font-size: 0.7em;}
button.ui-widget {font-size: 0.7em;}
.ui-menu { max-height: 200px; overflow-y: auto;}
body {color: #666;}

JavaScript

ko.bindingHandlers.combobox = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor();
        
        //initialize combobox    
        $(element).combobox();
        
        //when newly create input changes, then update model
        $(element).next("input").bind("autocompleteselect autocompletechange", function(event, ui) {
            console.log(ui.item);
            observable(ui.item ? ui.item.value : "");
            console.log(observable());
        });
        
        
    },
    update: function(element, valueAccessor) {
        //update the element's value, when the model changes
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).next("input").val(value);   
    }        
};


var viewModel = {
    optionValue: ko.observable()
};

viewModel.computedVar = ko.computed(function() {
    return this.optionValue();
}, viewModel);
                    
ko.applyBindings(viewModel);