Knockout js - >绑定到可编辑的div文本？

Question

如何将observable绑定到可编辑的div文本内容？

Answer 1

您需要修改默认的"text"绑定,以便能够将编辑的div的内容写回observable.此任务的简单自定义绑定处理程序可能如下所示:

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);
    }
};

但请注意,此示例代码需要jQuery.

用法就像这样简单:

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

这是一个例子(用CoffeeScript编写):http://jsfiddle.net/aBUEu/1/