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/

Knockout valueUpdate使用可编辑的div元素

1 个答案: