knockout valueUpdate ne fonctionne pas avec Pagedown ?

Question

J'ai à mon avis ce qui suit :

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

Ce qui, lors de la frappe, se comporte comme je m'y attendais.Mais j'utilise un éditeur WMD/Pagedown pour cliquer sur un bouton qui ajoute du contenu au champ, un peu comme la zone de contenu de la publication de StackOverflow lorsque vous créez/mettez à jour une publication.

Si je clique simplement sur un bouton (pour ajouter des astérisques, des crochets, etc.) et que je ne tape rien, la valeur n'est jamais mise à jour dans le content observable.

j'ai un save bouton que je pourrais utiliser pour déclencher la "synchronisation" avant de sauvegarder les données en spécifiant les éléments d'entrée à mettre à jour, mais je ne sais pas si c'est possible.Quelle est la bonne façon de gérer cette situation ?

Mise à jour:Jsfiddle pour démontrer le problème : http://jsfiddle.net/BcuLq/

Mise à jour 2 : Ce comportement se produit également avec un sélecteur de date datetime que j'utilise pour remplir une entrée avec une chaîne.Toute solution générique que je peux appliquer à toutes les entrées remplies par programme serait idéale, même si je ne suis pas sûr que ce soit une façon raisonnable de procéder.

Answer 1

Il s'agit d'un véritable cas d'utilisation pour l'utilisation d'un reliure personnalisée.J'ai implémenté TinyMCE contre un <textarea> avec succès avec cette méthode.

Le problème que vous observez est que les manipulations que vous effectuez en cliquant sur les boutons de la barre d'outils déclenchent des événements sur le Markdown.Editor ce qui modifie la valeur du sous-jacent <textarea> sans le change événement en cours de déclenchement, sur lequel Knockout s'appuie bien sûr pour notifier ses abonnés.

Ma solution implémente une liaison personnalisée pour garantir que les événements déclenchés par l'éditeur wysiwyg sont reflétés dans le modèle de vue.Plus précisément, pour garantir que la valeur est toujours à jour ainsi que pour maintenir un dirty drapeau dans le modèle de vue.Comme je ne connais pas le plug-in Markdown, j'ai inclus un échantillon tiré de ma solution TinyMCE.Le principe sera exactement le même il vous suffira d’appliquer les spécificités de l’éditeur 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()());
    }
};

Enfin, votre liaison peut maintenant être implémentée comme suit :

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

MISE À JOUR

Depuis la lecture de PageDown, voici la liaison personnalisée tirée du fork de votre JSFiddle

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