HTMLバインディングのコンテンツへの変更を監視する

Question

HTMLをdiv要素にバインドしようとしていますが、そのdivのコンテンツを場所エディタで編集して保存ボタンをクリックして取得していますが、失敗しました。

ビューは次のようになります。このJavaScriptを使用して

<div id="content" data-bind="html: content"></div> 
<button data-bind="click: function(){ save() }">Save</button> 

：

var viewModel = { 
    content: ko.observable("<h3>Test</h3>"), 
    save: function(){ 
     console.log(ko.toJSON(viewModel));  
    } 
} 

$(function(){ 
    ko.applyBindings(viewModel); 
    $("#content").html("<h4>Test</h4>"); 
    ko.applyBindings(viewModel,document.getElementById('content')); 
}); 

もthis jsfiddleを参照してください。

コンソールを保存すると、まだ<h3>Test</h3>と表示されます。

私はここで何をしようとしていますか？

Answer 1

通常、編集可能ではない要素に配置されるため、htmlバインディングでは変更をキャッチするイベントハンドラは設定されません。

contenteditable属性を使用した例を次に示します。http://jsfiddle.net/rniemeyer/JksKx/（このスレッドから）

TinyMCEのようなエディタと統合する場合は、http://jsfiddle.net/rniemeyer/GwkRQ/（このスレッドから）です。