knockout valueUpdate not working with Pagedown?

Question

I have the following in my view:

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

Which when typing, behaves as I'd expect. But I'm using a WMD / Pagedown editor to click a button that adds content to the field, much like StackOverflow's post contents box when you're creating / updating a post.

If I just click a button (to add asterisks or brackets etc) and don't type anything, the value never gets updated in the content observable.

I do have a save button that I could use to trigger the "sync" before saving the data by specifiying the input elements to update, but I have no idea if that's possible. What's the proper way to handle this situation?

Update: Jsfiddle to demo the problem: http://jsfiddle.net/BcuLq/

Update 2: This behavior is also happening with a datetime datepicker that I'm using to populate an input with a string. Any generic solution that I can apply to all programatically-filled inputs would be ideal, though I'm not sure if that's a reasonable way to go about this.

Answer 1

This is a genuine use-case for using a custom binding. I implemented TinyMCE against a <textarea> successfully with this method.

The problem you are observing is the manipulations you make by clicking buttons on the tool bar are raising events on the Markdown.Editor which alters the value of the underlying <textarea> without the change event being fired, which of course Knockout relies upon in order to notify it's subscribables.

My solution implements a custom binding to ensure that events raised by the wysiwyg editor are reflected in the view-model. Specifically, to ensure that the value is always up-to-date as well as maintaining a dirty flag in the view-model. Since I am unfamiliar with the Markdown plug-in I have included a sample taken from my TinyMCE solution. The principle will be exactly the same you will just need to apply the specifics of the Markdown editor.

ko.bindingHandlers.wysiwyg = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).tinymce({
            /*** other options excluded for brevity ***/
            setup: function(editor) {
                editor.on('change', function() {
                    valueAccessor()(editor.getContent());
                    viewModel.isDirty = editor.isDirty();
                });
            }
        });
    },
    update: function(element, valueAccessor) {
            $(element).text(valueAccessor()());
    }
};

Finally your binding can now be implemented as follows;

<textarea data-bind="value: content, wysiwyg: content"></textarea>

UPDATE

Since reading up on PageDown, here is the custom binding taken from the fork of your JSFiddle

ko.bindingHandlers.wysiwyg = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        editor.hooks.chain("onPreviewRefresh", function () {
            $(element).change();
        });
        editor.run();
    }
};