监视对html绑定内容的更改

Question

我正在尝试将HTML绑定到div元素,使用某种编辑就地编辑器编辑该div的内容,单击保存按钮并检索新内容,但我没有成功.

该视图如下所示:

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

有了这个Javascript:

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

另见这个jsfiddle.

当我点击保存时,控制台仍然说<h3>Test</h3>.

我可以做我想做的事吗？

Answer 1

html绑定不会设置任何事件处理程序来捕获更改,因为它通常放在不可编辑的元素上.

以下是使用contenteditable属性的示例:http://jsfiddle.net/rniemeyer/JksKx/(来自此主题).

如果您希望与编辑器集成TinyMCE,那么这里有一个示例:http: //jsfiddle.net/rniemeyer/GwkRQ/ (来自此主题).