javascript - Why isn't the PageDown Editor triggering Knockout value update when using the button bar? -

javascript - Why isn't the PageDown Editor triggering Knockout value update when using the button bar? -

i having problem getting knockout model update when user uses pagedown button bar create changes editor text. typing, pasting, or cutting works fine button bar actions not.

i have tried adding hook onpreviewrefresh editor never seems fire.

here fiddle showing issue. if type test editor, test show in preview section. however, if type test editor , utilize menu bar create test bold preview section not see update until type character.

this custom binding using initialize pagedown editor:

var me = {}; me.markdownconverter = markdown.getsanitizingconverter(); me.markdowncounter = 0; ko.bindinghandlers.markdowneditor = { init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { ++me.markdowncounter; // create elements needed new pagedown editor. $(element).append($('<div id="wmd-button-bar-' + me.markdowncounter + '" class="wmd-button-bar"></div>')); $(element).append($('<textarea id="wmd-input-' + me.markdowncounter + '" class="wmd-input"></textarea>')); // create sure textarea binded view model updated. var newbindings = { textinput: valueaccessor }; ko.applybindingaccessorstonode($('#wmd-input-' + me.markdowncounter)[0], newbindings, viewmodel); // create editor , apply new elements ensuring observe // changes wmd-button-bar. var editor = new markdown.editor(me.markdownconverter, "-" + me.markdowncounter); editor.hooks.chain("onpreviewrefresh", function () { var value = valueaccessor(); debugger; value($('#wmd-input-' + me.markdowncounter).val()); }); editor.run(); homecoming { controlsdescendantbindings: true }; } };

the value update isn't triggered because value set programmatically, doesn't trigger textarea's alter event.

the onpreviewrefresh event not triggered because there no preview element. workaround can add together element , hide it:

var me = {}; me.markdownconverter = markdown.getsanitizingconverter(); me.markdowncounter = 0; ko.bindinghandlers.markdowntext = { init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { $(element).addclass('markdown-text'); }, update: function(element, valueaccessor, allbindings) { var value = valueaccessor(); var valueunwrapped = ko.unwrap(value); $(element).html(me.markdownconverter.makehtml(valueunwrapped)); } }; ko.bindinghandlers.markdowneditor = { init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { ++me.markdowncounter; // create elements needed new pagedown editor. $(element).append($('<div id="wmd-button-bar-' + me.markdowncounter + '" class="wmd-button-bar"></div>')); $(element).append($('<textarea id="wmd-input-' + me.markdowncounter + '" class="wmd-input"></textarea>')); // if no preview element found, onpreviewrefresh not triggered $(element).append('<div style="display: none" class="wmd-panel wmd-preview" id="wmd-preview-' + me.markdowncounter + '"></div>'); var $input = $('#wmd-input-' + me.markdowncounter); // create sure textarea binded view model updated. var newbindings = { textinput: valueaccessor }; ko.applybindingaccessorstonode($input[0], newbindings, viewmodel); // create editor , apply new elements ensuring observe // changes wmd-button-bar. var editor = new markdown.editor(me.markdownconverter, "-" + me.markdowncounter); editor.hooks.chain("onpreviewrefresh", function () { $input.change(); }); editor.run(); homecoming { controlsdescendantbindings: true }; } }; var vm = { notetext: ko.observable('') }; ko.applybindings(vm);

see http://jsfiddle.net/vaako62z/3/

javascript knockout.js custom-binding pagedown