淘汰赛valueUpdate无法与Pagedown一起使用? [英] knockout valueUpdate not working with Pagedown?

问题描述

我认为以下内容

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

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

Which when typing, behaves as I'd expect. But I'm using a WMD / Pagedown editor to click a button that adds content to the field, much like StackOverflow's post contents box when you're creating / updating a post.

如果我只单击一个按钮(添加星号或方括号等)并且不输入任何内容，则该值永远不会在content观察值中得到更新.

If I just click a button (to add asterisks or brackets etc) and don't type anything, the value never gets updated in the content observable.

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

I do have a save button that I could use to trigger the "sync" before saving the data by specifiying the input elements to update, but I have no idea if that's possible. What's the proper way to handle this situation?

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

Update: Jsfiddle to demo the problem: http://jsfiddle.net/BcuLq/

更新2:我使用日期时间datepicker来填充字符串的输入时，也会发生这种情况.我可以将其应用于所有以程序方式填充的输入的任何通用解决方案都是理想的，尽管我不确定这是否是解决此问题的合理方法.

Update 2: This behavior is also happening with a datetime datepicker that I'm using to populate an input with a string. Any generic solution that I can apply to all programatically-filled inputs would be ideal, though I'm not sure if that's a reasonable way to go about this.

推荐答案

这是使用自定义绑定.我使用此方法针对<textarea>成功实现了TinyMCE.

This is a genuine use-case for using a custom binding. I implemented TinyMCE against a <textarea> successfully with this method.

您正在观察的问题是，通过单击工具栏上的按钮进行的​​操作正在引发Markdown.Editor上的事件，这会更改底层<textarea>的值，而不会触发change事件，这当然敲除依赖于通知它的可订阅对象.

The problem you are observing is the manipulations you make by clicking buttons on the tool bar are raising events on the Markdown.Editor which alters the value of the underlying <textarea> without the change event being fired, which of course Knockout relies upon in order to notify it's subscribables.

我的解决方案实现了自定义绑定，以确保所见即所得编辑器引发的事件均反映在视图模型中.具体来说，要确保该值始终是最新的，并在视图模型中保持dirty标志.由于我不熟悉Markdown插件，因此提供了从TinyMCE解决方案中获取的样本.原理与应用Markdown编辑器的细节完全相同.

My solution implements a custom binding to ensure that events raised by the wysiwyg editor are reflected in the view-model. Specifically, to ensure that the value is always up-to-date as well as maintaining a dirty flag in the view-model. Since I am unfamiliar with the Markdown plug-in I have included a sample taken from my TinyMCE solution. The principle will be exactly the same you will just need to apply the specifics of the 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()());
    }
};

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

Finally your binding can now be implemented as follows;

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

更新

自从阅读了PageDown之后，这是从您的 JSFiddle

Since reading up on PageDown, here is the custom binding taken from the fork of your JSFiddle

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

这篇关于淘汰赛valueUpdate无法与Pagedown一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！