Valore knockoutAggiornamento per lavorare con elementi div modificabili

Question

Sto usando l'editor wstwrap wysiwyg per sostituire la textarea che viene catalogata ad un valore osservabile da viewModel.

<textarea data-bind="html:data, valueUpdate:'afterkeydown'"></textarea> 

La textarea sopra riportata aggiorna il valore viewModel corrispondente ogni volta che viene premuto un tasto all'interno dell'area di testo.

Ora l'area di testo è sostituito dal WYSIWYG editor di bootstrap

<div class="editor" data-bind="html:data, valueUpdate:'afterkeydown'"></div> 

Ora il osservabile non viene aggiornato sul keydown.

qualche idea su come fare questo lavoro?

Creazione di un gestore di binding personalizzato "htmlUpdate" per div tag, simile a valueUpdate che funziona con gli elementi di input?

che dovrebbe supportare HTML inline, Qualche idea su come riutilizzare "valueUpdate" per lavorare con gli elementi div?

Ecco il violino http://jsfiddle.net/cHTCq/

Answer 1

Ecco un semplice legame di lavorare con un contentEditable div del genere e lo hanno aggiornato durante la digitazione così come quando si fa clic sui pulsanti di formattazione:

ko.bindingHandlers.htmlValue = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var updateHandler = function() { 
      var modelValue = valueAccessor(), 
       elementValue = element.innerHTML; 

      //update the value on keyup 
      modelValue(elementValue); 
     }; 

     ko.utils.registerEventHandler(element, "keyup", updateHandler); 
     ko.utils.registerEventHandler(element, "input", updateHandler); 
    }, 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()) || "", 
      current = element.innerHTML; 

     if (value !== current) { 
      element.innerHTML = value;  
     } 
    } 
}; 

Ecco il tuo fiddle aggiornato per usarlo: http://jsfiddle.net/rniemeyer/hp3K6/