为什么不是't使用按钮栏时，PageDown编辑器触发Knockout值更新

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

本文关键字：编辑器 PageDown 更新 Knockout 按钮 为什么不      更新时间：2023-09-26

当用户使用PageDown按钮栏更改编辑器文本时，我在更新淘汰模型时遇到问题。任何键入、粘贴或剪切操作都可以正常工作，但按钮栏操作不能正常工作。

我曾尝试将onPreviewRefresh的hook添加到编辑器中，但似乎从未启动。

这是一个显示问题的Fiddle。如果在编辑器中键入test，则test将显示在预览部分。但是，如果在编辑器中键入test，然后使用菜单栏将test设为粗体，则在键入其他字符之前，预览部分不会看到此更新。

这是我用来初始化PageDown编辑器的自定义绑定：

var ME = {};
ME.MarkdownConverter = Markdown.getSanitizingConverter();
ME.MarkdownCounter = 0;
ko.bindingHandlers.markdownEditor = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ++ME.MarkdownCounter;
        // Create the elements needed for a 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>'));
        // Make sure the textarea is properly binded up so that the view model is updated.
        var newBindings = { textInput: valueAccessor };
        ko.applyBindingAccessorsToNode($('#wmd-input-' + ME.MarkdownCounter)[0], newBindings, viewModel);
        // Create the editor and apply to the new elements ensuring that we detect all
        // changes from the 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();
        return { controlsDescendantBindings: true }; 
    }
};

值更新不会被触发，因为该值是通过编程设置的，不会触发文本区域的更改事件。

onPreviewRefresh事件不会被触发，因为没有预览元素。作为一种变通方法，您可以添加元素并将其隐藏：

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 the elements needed for a 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 is found, onPreviewRefresh is 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);
        // Make sure the textarea is properly binded up so that the view model is updated.
        var newBindings = { textInput: valueAccessor };
        ko.applyBindingAccessorsToNode($input[0], newBindings, viewModel);
        // Create the editor and apply to the new elements ensuring that we detect all
        // changes from the wmd-button-bar.
        var editor = new Markdown.Editor(ME.MarkdownConverter, "-" + ME.MarkdownCounter);
        editor.hooks.chain("onPreviewRefresh", function () {
            $input.change();
        });
        editor.run();
        return { controlsDescendantBindings: true }; 
    }
};
var vm = { noteText: ko.observable('') };
ko.applyBindings(vm);

请参阅http://jsfiddle.net/vaako62z/3/

相关文章：