Contenido editable de enlace personalizado editable

Question

¿Por qué en este ejemplo http://jsfiddle.net/JksKx/8/ div pierde cursor cuando escribo texto? ¿Cómo arreglar tal comportamiento?

Answer 1

El evento de teclado se activa y escribe en su modelo de vista, que luego activa la función de actualización del enlace personalizado. Esto está escribiendo el innerHTML de vuelta al elemento, lo que hace que pierdas el foco.

Una solución fácil es comprobar en la función de actualización si el elemento.innerHTML ya es el mismo que el valor que desea establecer.

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

posible que desee cambiar keydown a keyUp, pero aparte de eso funciona muy bien =)

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