Edytowalne niestandardowe powiązanie zawartości do noszenia

Question

Dlaczego w tym przykładzie http://jsfiddle.net/JksKx/8/ div utracony kursor podczas pisania tekstu? Jak naprawić takie zachowanie?

Answer 1

Zdarzenie keyup uruchamia i zapisuje do swojego viewmodelu, który następnie uruchamia funkcję aktualizacji niestandardowego powiązania. To jest zapisywanie innerHTML z powrotem do elementu, co powoduje utratę fokusu.

Łatwą poprawką jest sprawdzenie funkcji aktualizacji, jeśli element.innerHTML jest już taki sam, jak wartość, którą chcesz ustawić.

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

chcieć zmienić keyDown do keyUp, ale poza tym działa bardzo dobrze =)

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