Knockout valueUpdate使用可编辑的div元素

Question

我正在使用bootstrap wysiwyg编辑器来替换从viewModel数据绑定到可观察值的textarea.

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

每次从textarea内部按下一个键时,上面的textarea都会更新相应的viewModel值.

现在文本区域被wysiwyg引导程序编辑器取代

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

现在,在keydown上没有更新observable.

任何想法如何使这项工作？

为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/