Knockout js -> Bind to editable div text?

How can I bind an observable to an editable div text content?

Answers


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/


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


Need Your Help

Java 3D geometry library

java 3d geometry

Is there a computational 3D geometry (only computation, not rendering) library written in Java?