編集可能なdiv要素を扱うためのノックアウトvalueUpdate

Question

私は、databindされているtextareaをviewModelの観測可能な値に置き換えるためにブートストラップwysiwygエディタを使用しています。

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

上記のテキストエリアは、テキストエリア内からキーが押されるたびに、対応するviewModel値を更新します。

は今テキストエリアは今、観察がKeyDownイベントに更新されていないWYSIWYGエディタ、ブートストラップ

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

に置き換えられます。

どのようにすればいいですか？

タグをdivにするためのカスタムバインディングハンドラ "htmlUpdate"を作成します。これは、入力要素を扱うvalueUpdateと同様ですか？

また、インラインHTMLをサポートする必要があります。「valueUpdate」をdiv要素を使用して再利用する方法についてのアイデアはありますか？ここで

はここでフィドル http://jsfiddle.net/cHTCq/

Answer 1

でそのようにDIV、あなたは書式設定のボタンをクリックしたときにだけでなく、入力として、それは更新しているのcontentEditableで動作するように単純な結合である：

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

あなたのフィドルを使って更新しました：http://jsfiddle.net/rniemeyer/hp3K6/