Wartość KnockoutUpdate do pracy z edytowalnymi elementami div

Question

Używam edytora WYSIĄGI bootstrap do zastąpienia textarea, który jest databindowany do możliwej do zaobserwowania wartości z viewModel.

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

Powyższe pole tekstowe aktualizuje odpowiednią wartość widoku Model za każdym razem, gdy naciśnięto klawisz z wnętrza ramki tekstowej.

Teraz obszar tekst otrzymuje bootstrap WYSIWYG edytor

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

teraz obserwowalny nie jest aktualizowana na keydown.

jakikolwiek pomysł, jak to zrobić?

Tworzenie niestandardowego modułu wiążącego "htmlUpdate" w celu przypisania znaczników, podobnie do wartości Aktualizuj, która działa z elementami wejściowymi?

również powinna obsługiwać wbudowany HTML, Jakieś pomysły dotyczące ponownego użycia "valueUpdate" do pracy z elementami div?

Oto skrzypce http://jsfiddle.net/cHTCq/

Answer 1

Oto prosty wiązania do pracy z contentEditable div tak i mieć go aktualizować w trakcie pisania, a także po kliknięciu przycisków formatowania:

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

Oto twoje skrzypce zaktualizowane do korzystania z niego: http://jsfiddle.net/rniemeyer/hp3K6/