Is listening to HTML5 contenteditable changes possible?

https://groups.google.com/d/topic/knockoutjs/Mh0w_cEMqOk/discussion

by karlhorky

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="editable" contenteditable="true" data-bind="htmlValue: test"></div>

<hr />

<div data-bind="html: test"></div>

<hr />

<button data-bind="click: reset">Reset</button>

CSS

em { font-style: italic; }

JavaScript

ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        ko.utils.registerEventHandler(element, "keyup", function() {
            var modelValue = valueAccessor();
            var elementValue = element.innerHTML;
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(elementValue);
                
            }
            else { //handle non-observable one-way binding
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
            }
        }
                                     )
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "";
        if (element.innerHTML !== value) {
            element.innerHTML = value;    
        }
    }
};



var viewModel = {
    test: ko.observable("<em>test</em>"),
    reset: function() {
       this.test("<em>test</em>");   
    }
};

ko.applyBindings(viewModel);