Knockout js -> Bind to editable div text?

dom-events, javascript, knockout.js

Solution

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/

Problem

Original source