文本框值更改后立即更新 knockout.js 视图模型答案

【问题标题】：Update knockout.js view-model immediately after textbox value changes文本框值更改后立即更新 knockout.js 视图模型
【发布时间】：2012-10-03 19:31:27
【问题描述】：

如何让 knockout.js 在文本输入值更改后立即更新视图模型？问题是只有在字段失去焦点时才会触发更新。

来自knockout.js documentation：

"afterkeydown" 是最好的选择，如果你想实时更新您的视图模型。

我认为这没有帮助。在我的系统中，我有一个名为用户令牌的字段。因此用户经常使用鼠标粘贴令牌。

那么如何让 knockout.js 为文本字段中的每个文本更改立即更新它的模型。

【问题讨论】：

至少，它必须集中注意力才能让他们粘贴令牌，对吗？所以也许有一个焦点事件处理程序作为备份运行。否则总是只有 onchange
同意，一旦粘贴和制表符退出/失去焦点 onchange 或使用 jquerys change() 函数将比检查每个键条目更合适

标签： javascript html data-binding mvvm knockout.js

【解决方案1】：

正如您在问题中提到的，这是由valueUpdate binding 控制的。

input 是推荐值，如果您只需要支持“现代浏览器”。 “非现代浏览器”基本上是指 IE8 及更早版本。来自文档：

在 [所有valueUpdate] 选项中，input 是您的最佳选择视图模型实时更新，您只需要支持相当现代的浏览器，例如 IE 9+（而“afterkeydown”是旧浏览器的不错选择）。例如：

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'input'" /></p>
<p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->

<script type="text/javascript">
    var viewModel = {
        someValue: ko.observable("edit me")
    };
</script>

【讨论】：

【解决方案2】：

至少，它必须集中注意力才能让他们粘贴令牌，对吗？所以也许有一个焦点事件处理程序作为备份运行。

否则总是只有onchange。

这是一篇关于在 knockout.js 中使用 onchange 的 SO 帖子，因为我个人从未使用过它。 KnockoutJS - Updating ViewModel OnChange of textbox value instead of OnBlur Options

【讨论】：

或者我猜技术上的答案是使用值绑定。