Pergunta

Eu tenho o seguinte no meu ponto de vista:

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

Que ao digitar, comporta-se como eu esperava.Mas eu estou usando um ADM / Pagedown editor clique em um botão que adiciona conteúdo para o campo, muito parecido com o StackOverflow pós caixa de conteúdo quando você estiver criando e atualizando o post.

Se eu só clicar em um botão (adicionar asteriscos ou suportes etc) e não escreva nada, o valor nunca é actualizado no content observáveis.

Eu tenho um save botão que eu poderia usar para acionar o "sync" antes de salvar os dados especificando os elementos de entrada para atualizar, mas eu não tenho idéia se isso é possível.Qual é a maneira correta de lidar com essa situação?

Atualização:Jsfiddle para demonstrar o problema: http://jsfiddle.net/BcuLq/

Atualização 2: Esse comportamento também está acontecendo com um selecionador de data datetime que eu estou usando para preencher uma entrada com uma seqüência de caracteres.Qualquer solução genérica que eu possa aplicar a todos através de programação cheio de entradas seria o ideal, embora eu não tenho certeza se isso é uma forma razoável para fazer isto.

Foi útil?

Solução

Este é um genuíno caso de uso para a utilização de um ligação personalizada.Eu implementado TinyMCE contra um <textarea> sucesso com este método.

O problema que você está observando é que as manipulações você faz clicando em botões na barra de ferramentas são a criação de eventos no Markdown.Editor que altera o valor do subjacente <textarea> sem o change evento que está sendo acionado, o que, naturalmente Nocaute depende, a fim de notificá-la da subscribables.

A minha solução implementa uma ligação personalizada para garantir que os eventos gerados pelo editor wysiwyg são refletidas no modo de exibição do modelo.Especificamente, para assegurar que o valor é sempre up-to-date, bem como a manutenção de um dirty sinalizador na vista do modelo.Desde que eu estou familiarizado com o Markdown plug-in de eu ter incluído uma amostra da minha TinyMCE solução.A princípio será exatamente o mesmo, você só vai precisar para aplicar as especificidades do Markdown editor.

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 a sua ligação pode agora ser implementado da seguinte forma;

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

ATUALIZAÇÃO

Desde lendo sobre PageDown, aqui é a ligação personalizada tomadas a partir da bifurcação da sua JSFiddle

ko.bindingHandlers.wysiwyg = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        editor.hooks.chain("onPreviewRefresh", function () {
            $(element).change();
        });
        editor.run();
    }
};
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top