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

Question

如何将可观察对象绑定到可编辑 DIV 的文本内容中？

- Jibi Abraham

---

如果"text"和"value"无法正常工作，您需要编写自定义绑定。 - Niko

这个问题不合法吗？为什么要踩它？ - Jibi Abraham

至少它没有显示出太多的研究努力。通过添加更多信息，您肯定可以提高问题的质量。 - Niko

@Niko - 只因为有人写了一个简短而直接的问题，并不意味着他/她没有进行过调查研究。 - Jibi Abraham

我实际上已经为你的问题点了赞，但展示一下你所做的努力总是好的... - Michal B.

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/

- Niko

---

太棒了，这是一个更新的小玩意儿。在这个新版本中，指向 knockout.js 的链接不再出现 404 错误。http://jsfiddle.net/aBUEu/18/ - mg1075

在某些情况下，我会使用 $(element).on('keypress', function() {。 - Alvaro

@Alvaro，你尝试过使用keypress或keyup之类的东西吗？我用这种方式得到了一些奇怪的行为，当我按键时，光标会被发送到div的开头。 - santiago arizti

@santiagoarizti 我也遇到了使用 keyup 时的光标行为问题，你有解决吗？ - dove

@dove 我也尝试过仅在该元素未被聚焦时执行更新函数，代码如下：if (!$(element).is(":focus")) { /* 更新该元素 */ } - santiago arizti

Answer 2

默认情况下无法实现此功能，因为在可编辑的div中更改文本不会触发任何事件来更新模型中的值。

你需要一个自定义绑定来实现这个功能。你可以在这里了解更多信息：http://knockoutjs.com/documentation/custom-bindings.html

- Michal B.