Soppressione contenuto modificabile con binding personalizzato

Question

Perché in questo esempio http://jsfiddle.net/JksKx/8/ div è perso il cursore quando scrivo il testo? Come risolvere un simile comportamento?

Answer 1

L'evento keyup viene attivato e scritto sul viewmodel, che attiva la funzione di aggiornamento dell'associazione personalizzata. Questo sta riportando l'innerHTML all'elemento, il che sta causando la perdita di concentrazione.

Una soluzione semplice consiste nel controllare la funzione di aggiornamento se l'elemento.innerHTML è già uguale al valore su cui si desidera impostarlo.

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

potrebbe desiderare di cambiare keydown a keyup, ma a parte questo funziona davvero bene =)

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