监控 html 绑定内容的变化答案

【问题标题】：Monitor changes to content of html binding监控 html 绑定内容的变化
【发布时间】：2011-08-08 18:56:20
【问题描述】：

我正在尝试将 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'));
});

另见this jsfiddle。

当我点击保存时，控制台仍然显示<h3>Test</h3>。

有可能做我想做的事情吗？

【问题讨论】：

你能解释一下你打算做什么吗？？

标签： javascript knockout.js

【解决方案1】：

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

以下是使用contenteditable 属性的示例：http://jsfiddle.net/rniemeyer/JksKx/（来自此线程）。

如果您希望与 TinyMCE 这样的编辑器集成，那么这里有一个示例：http://jsfiddle.net/rniemeyer/GwkRQ/（来自此线程）。

【讨论】：