KnockoutJS:如何在用户copy'n'paste到文本字段后更新视图模型？

Question

我正在开发一个网站,用户在输入文本框中输入一些文本后自动填充表格中的搜索结果(类似于谷歌即时搜索).

当用户通过添加输入信息时,我设法获得淘汰赛js来更新视图模型

valueUpdate: 'afterkeydown'

但是,在我的数据绑定属性中,我还需要处理用户右键单击并将一些文本粘贴到文本框中的情况,所以我尝试了:

valueUpdate: ['afterkeydown','mouseup']

但是这不起作用,当我试图通过视图模型读取文本框的值时,我一直得到旧的值,直到我从输入文本框中跳出.

任何人都知道如何解决这个问题？

奥斯卡

Answer 1

您可以使用valueUpdate:'input'.我测试它可以在Opera,Firefox和Chrome中使用.我在Linux机器上,所以我无法在IE中测试它.检查这个小提琴

更新:我现在在IE8中测试它,它不起作用.但使用以下似乎工作.

valueUpdate:['afterkeydown','propertychange','input']

感谢Michael Best对此的评论:)我已经更新了小提琴

更新okt 2014:正如kzh在下面的评论中提到的,在Knockout.js的更高版本之一中添加了textInput绑定.此绑定处理此方案,并构建了浏览器怪癖处理 http://knockoutjs.com/documentation/textinput-binding.html

Answer 2

新方法

代替:

data-bind="value: myValue, valueUpdate: ['input', 'textchange']"

现在可以使用textInput绑定:

data-bind="textInput: myValue"

从文档:

该textInput绑定链接文本框(<input>)或文本区域(<textarea>)与视图模型属性,提供视图模型属性和元素的值之间的双向更新.与value绑定不同,textInput它为DOM提供所有类型用户输入的即时更新,包括自动完成,拖放和剪贴板事件.

老路

valueUpdate: ['afterkeydown','propertychange','input']

如果要支持RightMouseClick→ Delete或RightMouseClick→,则在IE9中不起作用Cut.

我想出的解决方案涉及使用jQuery和一个名为jQuery Splendid Textchange的jQuery插件.在加载了jQuery和插件脚本后,您可以愉快地使用'textchange'事件.

valueUpdate: 'textchange'

但是,我可能有一天会停止支持糟糕的浏览器,所以我有这个:

valueUpdate: ['input', 'textchange']

这是我为测试这个和其他事件而制作的小提琴:http://jsfiddle.net/kaleb/w3ErR/

注意如果你正在使用requirejs,jquery可能必须是淘汰赛的硬依赖,才能使其始终正常工作.