如何让 Knockout JS 在按键时进行数据绑定，而不是失焦？

javascript knockout.js

2022-08-30 01:32:03

此挖空 js 示例的工作原理是，当您编辑字段并按 Tab 键时，视图模型数据以及字段下方的文本将更新。

如何更改此代码，以便每次按键都会更新视图模型数据？

alt text

<!doctype html>
<html>
    <title>knockout js</title>
    <head>
        <script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script>
        <script type="text/javascript">
        window.onload= function() {

            var viewModel = {
                firstName : ko.observable("Jim"),
                lastName : ko.observable("Smith")
            };
            viewModel.fullName = ko.dependentObservable(function () {
                return viewModel.firstName() + " " + viewModel.lastName();
            });

            ko.applyBindings(viewModel);
       }
        </script>
    </head>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
    </body>
</html>

答案 1

<body>
        <p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
        <p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>

从文档中

其他参数

值更新

如果绑定还包括一个名为 valueUpdate 的参数，这将定义应使用哪个浏览器事件 KO 来检测更改。以下字符串值是最常用的选择：

“更改”（默认） - 当用户将焦点移动到其他控件时，或者在元素的情况下，在任何更改后立即更新视图模型

“keyup” - 当用户释放密钥时更新视图模型

“按键” - 当用户键入键时更新视图模型。与keyup不同，当用户按住键时，它会反复更新

“afterkeydown” - 一旦用户开始键入字符，就会更新您的视图模型。这可以通过捕获浏览器的键降事件并异步处理该事件来工作。

在这些选项中，如果您想保持视图模型实时更新，“afterkeydown”是最佳选择。

答案 2

在 3.2 版中，您可以简单地使用文本输入绑定：

<input data-bind="textInput: userName" />

它执行两件重要的事情：

立即更新
处理浏览器差异以进行剪切，拖动，自动完成...

因此，无需其他模块，自定义控件和其他东西。