淘汰 valueUpdate 以使用可编辑的 div 元素

Question

我正在使用引导程序所见即所得编辑器来替换正在数据绑定到 viewModel 中的可观察值的文本区域。

<textarea data-bind="html:data, valueUpdate:'afterkeydown'"></textarea>

每次从文本区域内部按下一个键时，上述文本区域都会更新相应的 viewModel 值。

现在文本区域被所见即所得的引导编辑器替换

<div class="editor" data-bind="html:data, valueUpdate:'afterkeydown'"></div>

现在 observable 不会在 keydown 上更新。

知道如何进行这项工作吗？

为 div 标签创建自定义绑定处理程序“htmlUpdate”，类似于处理输入元素的 valueUpdate？

也应该支持内联 HTML，关于如何重用“valueUpdate”来处理 div 元素的任何想法？

这是小提琴 http://jsfiddle.net/cHTCq/

Answer 1

这是一个简单的绑定，可以使用这样的 contentEditable div，并在您键入以及单击格式按钮时更新它：

ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var updateHandler = function() {
            var modelValue = valueAccessor(),
                elementValue = element.innerHTML;

            //update the value on keyup
            modelValue(elementValue);
        };

        ko.utils.registerEventHandler(element, "keyup", updateHandler);
        ko.utils.registerEventHandler(element, "input", updateHandler);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "",
            current = element.innerHTML;

        if (value !== current) {
            element.innerHTML = value;    
        }
    }
};

这是您更新后的小提琴以使用它：http://jsfiddle.net/rniemeyer/hp3K6/