Knockout valueUpdate für die Arbeit mit editierbaren div Elementen

Question

Ich benutze Bootstrap WYSIWYG Editor, um die TextArea, die zu einem beobachtbaren Wert von ViewModel Database ist zu ersetzen.

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

Die obige TextArea- aktualisiert den entsprechenden Wert Ansichtsmodell jedes Mal eine Taste aus dem Inneren des TextArea- gedrückt wird.

Nun wird der Textbereich durch wysıwyg Bootstrap-Editor ersetzt

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

Nun ist die die beobachtbare nicht auf keydown aktualisiert.

eine Idee, wie dies funktioniert?

Erstellen eines benutzerdefinierten Bindungshandlers "htmlUpdate" zu div-Tags, ähnlich wie valueUpdate, das mit Eingabeelementen arbeitet?

auch das sollte Inline-HTML unterstützen, Irgendwelche Ideen darüber, wie Sie die "valueUpdate" verwenden, um mit div-Elementen zu arbeiten? Hier

ist die Geige http://jsfiddle.net/cHTCq/

Answer 1

Hier ist eine einfache Bindung mit einem contentEditable div, so zu arbeiten und es aktualisieren, wie Sie sowie eingeben, wenn Sie die Formatierung Schaltflächen klicken:

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;  
     } 
    } 
}; 

Hier ist Ihre Geige aktualisiert, um es zu verwenden: http://jsfiddle.net/rniemeyer/hp3K6/