Autocomplete and KO test

by bombo

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<form>
    <input type="text" id="myText" data-bind="auto: array, shValue : { value: 'myValue', change: update }" />
</form>

<span data-bind="html: output"></span>

JavaScript

function keyDownEvent (event) {
    var $this = $(event.target);
    real($this.val());
    callback();
}

function SHValue (viewModel, property, element, callback) {
    var delegate = false,
        real, 
        dummy = ko.observable(''),
        $element = $(element);
    this.view = ko.dependentObservable(function () {
        if (delegate) {
            return dummy();
        }
        return viewModel[property]();
    }, viewModel);
    
    this.undelegateView = function (event) {
        delegate = false;
        $element.unbind('keydown', keyDownEvent)
            .unbind('blur', this.undelegateView);
    };
    this.delegateView = function () {
        real = viewModel[property];
        dummy(real());
        $element.bind('keydown', keyDownEvent);
        $element.bind('blur', this.undelegateView);
        delegate = true;
    };
}

ko.bindingHandlers['shValue'] = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var property = valueAccessor().value,
            callback = valueAccessor().change;
        
        context['__sh' + property] = new SHValue(context, property, element, callback);
        ko.bindingHandlers.value.init(element, function () { 
            return context['__sh' + property].view;
        }, allBindingsAccessor, context);
    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        var property = valueAccessor().value;
        ko.bindingHandlers.value.update(element, function () { 
            return context['__sh' + property].view;
        }, allBindingsAccessor, context);
    }
};

ko.bindingHandlers['auto'] = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).autocomplete({source: value});
    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        var value = ko.utils.unwrapObservable(valueAccessor());
       ...