ノックアウト valueUpdate が Pagedown で機能しない場合?

Question

私の見解では次のとおりです。

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

入力すると、期待どおりに動作します。ただし、投稿を作成/更新するときの StackOverflow の投稿コンテンツ ボックスとよく似た、フィールドにコンテンツを追加するボタンをクリックするために WMD / Pagedown エディターを使用しています。

ボタンをクリックするだけで（アスタリスクや括弧などを追加するため）、何も入力しないと、値は更新されません。 content 観察可能な。

私は持っています save このボタンを使用すると、更新する入力要素を指定してデータを保存する前に「同期」をトリガーできますが、それが可能かどうかはわかりません。この状況に対処する適切な方法は何ですか?

アップデート：問題をデモするための Jsfiddle: http://jsfiddle.net/BcuLq/

更新 2: この動作は、入力に文字列を設定するために使用している日時日付ピッカーでも発生します。プログラムで入力されたすべての入力に適用できる汎用ソリューションが理想的ですが、それが合理的な方法であるかどうかはわかりません。

Answer 1

これは、 カスタムバインディング. 。に対して TinyMCE を実装しました。 <textarea> この方法で成功しました。

あなたが観察している問題は、ツールバーのボタンをクリックして行う操作によって、 Markdown.Editor 基礎となる値を変更します <textarea> なしで change もちろん、Knockout は、サブスクライブ対象に通知するためにこのイベントに依存します。

私のソリューションはカスタム バインディングを実装して、wysiwyg エディターによって発生したイベントがビューモデルに確実に反映されるようにします。具体的には、値が常に最新であることを保証するだけでなく、 dirty ビューモデル内のフラグ。私は Markdown プラグインに慣れていないため、TinyMCE ソリューションから取得したサンプルを含めました。原理はまったく同じで、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()());
    }
};

最後に、バインディングを次のように実装できるようになりました。

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

アップデート

PageDown を読んだので、フォークから取得したカスタム バインディングを以下に示します。 JSフィドル

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