Knockout js -> Bind to editable div text?

You can't do that by default, because changing text in editable div won't raise any event that would update the value in your model.

You will need a custom binding for this. You can read about it here: http://knockoutjs.com/documentation/custom-bindings.html


You will need to modify the default "text" binding so that it is able to write the content of the edited div back to the observable. A simple custom binding handler for this task can look like this:

ko.bindingHandlers.editableText = {
    init: function(element, valueAccessor) {
        $(element).on('blur', function() {
            var observable = valueAccessor();
            observable( $(this).text() );
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }
};

But please note that this example code requires jQuery.

Usage is as simple as this:

<div contentEditable="true" data-bind="editableText: foo"></div>

Here is an example (written in CoffeeScript): http://jsfiddle.net/aBUEu/1/