Eliminare il valore del valore non funziona con Pagadaggio?

Question

Ho il seguente in mio Punto di vista:

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

.

che quando si digita, si comporta come mi aspetterei. Ma sto usando un editor WMD / PagaDown per fare clic su un pulsante che aggiunge contenuti sul campo, molto simile alla casella dei contenuti post Stackoverflow quando stai creando / aggiornando un post.

Se ho appena fatto clic su un pulsante (per aggiungere asterischi o parentesi ecc. E non digitare nulla, il valore non viene mai aggiornato nel content osservabile.

Ho un pulsante save che potrei utilizzare per attivare la "sincronizzazione" prima di salvare i dati specificando gli elementi di input da aggiornare, ma non ho idea se è possibile. Qual è il modo corretto per gestire questa situazione?

Aggiornamento: jsfiddle to demo il problema: http://jsfiddle.net/bculq/ Aggiornamento 2: Questo comportamento sta accadendo anche con un datepicker datetime che sto usando per popolare un ingresso con una stringa. Qualsiasi soluzione generica che posso applicare a tutti gli ingressi programmaticamente riempiti sarebbe l'ideale, anche se non sono sicuro che sia un modo ragionevole per farlo.

Answer 1

Questo è un vero caso d'uso per l'utilizzo di un Binding personalizzato . Ho implementato TinyMCE contro un <textarea> con successo con questo metodo.

Il problema che si osserva è che le manipolazioni apportate facendo clic sui pulsanti sulla barra degli strumenti stanno aumentando gli eventi sul Markdown.Editor che altera il valore del <textarea> sottostante senza che l'evento change sia spaventato, che ovviamente il knockout si basa per Notifica che sono abbonati.

La mia soluzione implementa un legame personalizzato per garantire che gli eventi sollevati dall'editor WYSIWYG siano riflessi nel modello di visualizzazione. In particolare, per garantire che il valore sia sempre aggiornato e mantenendo un flag dirty nel modello di visualizzazione. Dal momento che non sono familiare con il plug-in Markdown ho incluso un campione prelevato dalla mia soluzione TinyMCE. Il principio sarà esattamente lo stesso che dovrai solo applicare le specifiche dell'Editor 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()());
    }
};

.

Finalmente il tuo rilegatore può ora essere implementato come segue;

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

.

Aggiornamento

Dal momento che latrita su Pagadaggio, ecco il rilegatore personalizzato prelevato dalla forcella del tuo jsfiddle < / P >.

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

.