How can I tell PageDown to update its preview when the raw content is updated via jQuery?

Question

JSFiddle: http://jsfiddle.net/92z35/2/

I have a Pagedown editor that is currently working perfectly, except for the few cases when I have to insert some content programatically. If I insert and then type, the preview updates. But if I just insert, the preview remains unchanged.

What am I missing?

Code:

var converter = Markdown.getSanitizingConverter();
converter.hooks.chain("preBlockGamut", function (text, rbg) {
    return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {http://jsfiddle.net/BcuLq/#run
        return "<blockquote>" + rbg(inner) + "</blockquote>\n";
    });
});

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

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.appendText = function(){
    $("#wmd-input").val($("#wmd-input").val() + '@')
    }
};

ko.applyBindings(new ViewModel("Planet", "Earth"));  

Answer 1

First, add an update handler to your custom binding that causes the preview to refresh when the observable is changed. Once you've done that, make all your programmatic changes by altering the observable rather than directly changing the element's val; that way Knockout will detect that the value has changed and call your new update handler which will tell the editor to refresh.