Knockout контент редактируемые пользовательские привязки - PullRequest
6 голосов
/ 26 октября 2011

Почему в этом примере http://jsfiddle.net/JksKx/8/ div потерял курсор при написании текста?Как исправить такое поведение?

Ответы [ 2 ]

15 голосов
/ 26 октября 2011

Событие keyup вызывает и записывает в вашу модель представления, которая затем запускает функцию обновления пользовательской привязки.Это записывает 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;
        }
    }
};
3 голосов
/ 12 июля 2012

может захотеть изменить keydown на keyup, но в остальном работает очень хорошо =)

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