Question

I am trying to bind HTML to a div element, edit the content of that div with some sort of edit in place editor, click a save button and retrieve the new content, but I have been unsuccessful.

The view looks like this:

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

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

See also this jsfiddle.

When I click save the console still says <h3>Test</h3>.

Is it possible to do what I am trying to do here?

Answer 1

The html binding does not setup any event handlers to catch changes, as it is normally placed on elements that are not editable.

Here is a sample of using the contenteditable attribute: http://jsfiddle.net/rniemeyer/JksKx/ (from this thread).

If you are looking to integrate with an editor like TinyMCE, then here is a sample: http://jsfiddle.net/rniemeyer/GwkRQ/ (from this thread).