Knockout ValueUpdate funktioniert nicht mit Pagedown?

Question

Ich habe folgendes aus meiner Sicht:

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

Was sich beim Tippen so verhält, wie ich es erwarten würde.Aber ich verwende einen WMD-/Pagedown-Editor, um auf eine Schaltfläche zu klicken, die Inhalt zum Feld hinzufügt, ähnlich wie das Beitragsinhaltsfeld von StackOverflow, wenn Sie einen Beitrag erstellen/aktualisieren.

Wenn ich einfach auf eine Schaltfläche klicke (um Sternchen, Klammern usw. hinzuzufügen) und nichts eingebe, wird der Wert im nicht aktualisiert content beobachtbar.

Ich habe eine save Schaltfläche, mit der ich die „Synchronisierung“ vor dem Speichern der Daten auslösen könnte, indem ich die zu aktualisierenden Eingabeelemente spezifiziere, aber ich habe keine Ahnung, ob das möglich ist.Wie geht man mit dieser Situation richtig um?

Aktualisieren:Jsfiddle, um das Problem zu demonstrieren: http://jsfiddle.net/BcuLq/

Update 2: Dieses Verhalten tritt auch bei einem Datetime-Datepicker auf, den ich verwende, um eine Eingabe mit einer Zeichenfolge zu füllen.Ideal wäre jede generische Lösung, die ich auf alle programmgesteuert ausgefüllten Eingaben anwenden kann, obwohl ich nicht sicher bin, ob das ein vernünftiger Weg ist.

Answer 1

Dies ist ein echter Anwendungsfall für die Verwendung von a individuelle Bindung.Ich habe TinyMCE gegen a implementiert <textarea> erfolgreich mit dieser Methode.

Das Problem, das Sie beobachten, besteht darin, dass die Manipulationen, die Sie durch Klicken auf Schaltflächen in der Symbolleiste vornehmen, Ereignisse auf dem auslösen Markdown.Editor was den Wert des Basiswerts verändert <textarea> ohne das change Ereignis ausgelöst wird, auf das sich Knockout natürlich verlässt, um seine Abonnenten zu benachrichtigen.

Meine Lösung implementiert eine benutzerdefinierte Bindung, um sicherzustellen, dass vom WYSIWYG-Editor ausgelöste Ereignisse im Ansichtsmodell widergespiegelt werden.Konkret geht es darum, sicherzustellen, dass der Wert immer auf dem neuesten Stand ist und dass ein dirty Flag im Ansichtsmodell.Da ich mit dem Markdown-Plug-in nicht vertraut bin, habe ich ein Beispiel aus meiner TinyMCE-Lösung beigefügt.Das Prinzip ist genau das gleiche, Sie müssen lediglich die Besonderheiten des Markdown-Editors anwenden.

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

Abschließend kann Ihre Bindung nun wie folgt implementiert werden;

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

AKTUALISIEREN

Seit ich auf PageDown gelesen habe, ist hier die benutzerdefinierte Bindung aus der Gabel Ihres JSFiddle

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