¿La actualización del valor knockout no funciona con Pagedown?

Question

Tengo lo siguiente en mi opinión:

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

Que al escribir se comporta como era de esperar.Pero estoy usando un editor de armas de destrucción masiva/Pagedown para hacer clic en un botón que agrega contenido al campo, muy parecido al cuadro de contenido de la publicación de StackOverflow cuando estás creando/actualizando una publicación.

Si simplemente hago clic en un botón (para agregar asteriscos o corchetes, etc.) y no escribo nada, el valor nunca se actualiza en el content observable.

tengo un save botón que podría usar para activar la "sincronización" antes de guardar los datos especificando los elementos de entrada para actualizar, pero no tengo idea si eso es posible.¿Cuál es la forma correcta de manejar esta situación?

Actualizar:Jsfiddle para demostrar el problema: http://jsfiddle.net/BcuLq/

Actualización 2: Este comportamiento también ocurre con un selector de fecha y hora que estoy usando para completar una entrada con una cadena.Cualquier solución genérica que pueda aplicar a todas las entradas completadas mediante programación sería ideal, aunque no estoy seguro de que sea una forma razonable de hacerlo.

Answer 1

Este es un caso de uso genuino para usar un encuadernación personalizada.Implementé TinyMCE contra un <textarea> exitosamente con este método.

El problema que está observando es que las manipulaciones que realiza al hacer clic en los botones de la barra de herramientas generan eventos en el Markdown.Editor que altera el valor del subyacente <textarea> sin el change evento que se activa, en el que, por supuesto, Knockout se basa para notificar a sus suscriptores.

Mi solución implementa un enlace personalizado para garantizar que los eventos generados por el editor wysiwyg se reflejen en el modelo de vista.En concreto, para garantizar que el valor esté siempre actualizado así como mantener un dirty bandera en el modelo de vista.Como no estoy familiarizado con el complemento Markdown, he incluido una muestra tomada de mi solución TinyMCE.El principio será exactamente el mismo: sólo necesitarás aplicar las características específicas del 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, su enlace ahora se puede implementar de la siguiente manera;

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

ACTUALIZAR

Desde que leí sobre PageDown, aquí está el enlace personalizado tomado de la bifurcación de su JSFiddle

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