Knockout内容可编辑自定义绑定

Question

为什么在这个示例中http://jsfiddle.net/JksKx/8/ div在写文本时丢失了光标？如何解决这种行为？

Answer 1

keyup事件是触发并写入viewmodel，然后触发自定义绑定的更新功能。这是将innerHTML写回元素，这会导致你失去焦点。

一个简单的解决方法是，如果element.innerHTML已经与您想要设置的值相同，则检查更新功能。

http://jsfiddle.net/rniemeyer/JksKx/9/

ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        ko.utils.registerEventHandler(element, "keydown", function() {
            var modelValue = valueAccessor();
            var elementValue = element.innerHTML;
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(elementValue);
            }
            else { //handle non-observable one-way binding
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
            }
        }
                                     )
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "";
        if (element.innerHTML !== value) {
            element.innerHTML = value;
        }
    }
};

Answer 2

可能想要将keydown更改为keyup，但除此之外效果非常好=）

ko.utils.registerEventHandler(element, "keyup", function() {