knockout.js - knockout valueUpdate 不适用于 Pagedown？

Question

我的观点是:

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

在输入时，它的行为符合我的预期。但我正在使用 WMD/Pagedown 编辑器单击一个按钮，将内容添加到该字段，就像您创建/更新帖子时 StackOverflow 的帖子内容框一样。

如果我只是点击一个按钮(添加星号或括号等)而不输入任何内容，该值永远不会在 content observable 中更新。

我确实有一个 save 按钮，我可以使用它在通过指定要更新的输入元素来保存数据之前触发“同步”，但我不知道这是否可行。处理这种情况的正确方法是什么？

更新:Jsfiddle 演示问题:http://jsfiddle.net/BcuLq/

更新 2: 这种行为也发生在我用来用字符串填充输入的日期时间日期选择器上。我可以应用于所有以编程方式填充的输入的任何通用解决方案都是理想的，尽管我不确定这是否是解决此问题的合理方法。

Answer 1

这是使用 custom binding 的真实用例.我针对 <textarea> 实现了 TinyMCE用这个方法成功了。

您观察到的问题是您通过单击工具栏上的按钮进行的​​操作正在引发 Markdown.Editor 上的事件。这会改变标的 Assets 的值(value) <textarea>没有 change事件被触发，当然，Knockout 依赖于它来通知它的订阅者。

我的解决方案实现了自定义绑定(bind)，以确保所见即所得编辑器引发的事件反射(reflect)在 View 模型中。具体来说，要确保该值始终是最新的并维护 dirty View 模型中的标志。由于我不熟悉 Markdown 插件，因此我提供了一个取 self 的 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()());
    }
};

最后，您的绑定(bind)现在可以按如下方式实现；

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

更新

自从阅读 PageDown 后，这里是从您的 JSFiddle 的分支中获取的自定义绑定(bind)

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