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

Question

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

Answer 1

您将需要修改默认的“文本”绑定，以便它能够将编辑后的 ​​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/

Answer 2

默认情况下您不能这样做，因为更改可编辑 div 中的文本不会引发任何会更新模型中的值的事件。

为此，您将需要一个自定义绑定。您可以在这里阅读：http: //knockoutjs.com/documentation/custom-bindings.html