Knockout ValueUpdate не работает с Pagedown?

Question

На мой взгляд, я имею следующее:

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

Который при наборе текста ведет себя так, как я и ожидал.Но я использую редактор WMD/Pagedown, чтобы нажать кнопку, которая добавляет контент в поле, очень похоже на окно содержимого сообщения StackOverflow, когда вы создаете/обновляете сообщение.

Если я просто нажму кнопку (чтобы добавить звездочки, скобки и т. д.) и ничего не наберу, значение никогда не обновится в content наблюдаемый.

у меня есть save кнопку, которую я мог бы использовать для запуска «синхронизации» перед сохранением данных, указав элементы ввода для обновления, но я понятия не имею, возможно ли это.Как правильно поступить в этой ситуации?

Обновлять:Jsfiddle, чтобы продемонстрировать проблему: http://jsfiddle.net/BcuLq/

Обновление 2: Такое поведение также происходит с средством выбора даты и времени, которое я использую для заполнения ввода строкой.Любое общее решение, которое я могу применить ко всем программно заполненным входным данным, было бы идеальным, хотя я не уверен, что это разумный способ сделать это.

Answer 1

Это реальный вариант использования пользовательская привязка.Я реализовал TinyMCE против <textarea> успешно с помощью этого метода.

Проблема, которую вы наблюдаете, заключается в том, что манипуляции, которые вы совершаете, нажимая кнопки на панели инструментов, вызывают события на Markdown.Editor что меняет стоимость базового актива <textarea> без change запускается событие, на которое, конечно же, полагается Knockout, чтобы уведомить своих подписчиков.

В моем решении реализована пользовательская привязка, гарантирующая, что события, создаваемые редактором wysiwyg, отражаются в модели представления.В частности, чтобы гарантировать, что значение всегда актуально, а также поддерживать dirty флаг в модели представления.Поскольку я не знаком с плагином Markdown, я включил образец, взятый из моего решения TinyMCE.Принцип будет точно такой же, вам просто нужно будет применить особенности редактора Markdown.

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()());
    }
};

Наконец, ваша привязка теперь может быть реализована следующим образом:

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

ОБНОВЛЯТЬ

Прочитав PageDown, вот пользовательская привязка, взятая из ответвления вашего JSFiddle

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