ノックアウト valueUpdate が Pagedown で機能しない場合?
-
21-12-2019 - |
質問
私の見解では次のとおりです。
<textarea data-bind="value: content, valueUpdate: 'afterkeydown'"></textarea>
入力すると、期待どおりに動作します。ただし、投稿を作成/更新するときの StackOverflow の投稿コンテンツ ボックスとよく似た、フィールドにコンテンツを追加するボタンをクリックするために WMD / Pagedown エディターを使用しています。
ボタンをクリックするだけで(アスタリスクや括弧などを追加するため)、何も入力しないと、値は更新されません。 content
観察可能な。
私は持っています save
このボタンを使用すると、更新する入力要素を指定してデータを保存する前に「同期」をトリガーできますが、それが可能かどうかはわかりません。この状況に対処する適切な方法は何ですか?
アップデート:問題をデモするための Jsfiddle: http://jsfiddle.net/BcuLq/
更新 2: この動作は、入力に文字列を設定するために使用している日時日付ピッカーでも発生します。プログラムで入力されたすべての入力に適用できる汎用ソリューションが理想的ですが、それが合理的な方法であるかどうかはわかりません。
解決
これは、 カスタムバインディング. 。に対して 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();
}
};