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

Question

knockout js 的这个示例有效，因此当您编辑字段并按 TAB 时，视图模型数据以及字段下方的文本都会更新。

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

<!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>

Answer 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>

来自documentation

附加参数

• 值更新

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

  • "change" (默认) - 当用户更新你的视图模型 将焦点移动到不同的控件，或者在 元素，在任何更改后立即

  • "keyup" - 当用户释放一个键时更新你的视图模型

  • "keypress" - 当用户输入一个 钥匙。与 keyup 不同，这会在用户持有密钥时重复更新 下

  • "afterkeydown" - 一旦用户更新你的视图模型 开始输入一个字符。这通过捕获浏览器的 keydown 事件并异步处理事件。

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

Answer 2

在3.2版中，您可以简单地使用textinput binding.：

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

它做了两件重要的事情：

• 立即更新
• 处理剪切、拖动、自动完成的浏览器差异...

因此不需要额外的模块、自定义控件和其他东西。

Answer 3

如果您希望它“默认”更新afterkeydown，您可以在value 绑定处理程序中注入valueUpdate 绑定。只需提供一个新的allBindingsAccessor 供处理程序使用，其中包括afterkeydown。

(function () {
    var valueHandler = ko.bindingHandlers.value;
    var getInjectValueUpdate = function (allBindingsAccessor) {
        var AFTERKEYDOWN = 'afterkeydown';
        return function () {
            var allBindings = ko.utils.extend({}, allBindingsAccessor()),
                valueUpdate = allBindings.valueUpdate;

            if (valueUpdate === undefined) {
                return ko.utils.extend(allBindings, { valueUpdate: AFTERKEYDOWN });
            } else if (typeof valueUpdate === 'string' && valueUpdate !== AFTERKEYDOWN) {
                return ko.utils.extend(allBindings, { valueUpdate: [valueUpdate, AFTERKEYDOWN] });
            } else if (typeof valueUpdate === 'array' && ko.utils.arrayIndexOf(valueUpdate, AFTERKEYDOWN) === -1) {
                valueUpdate = ko.utils.arrayPushAll([AFTERKEYDOWN], valueUpdate);
                return ko.utils.extend(allBindings, {valueUpdate: valueUpdate});
            }
            return allBindings;
        };
    };
    ko.bindingHandlers.value = {
        // only needed for init
        'init': function (element, valueAccessor, allBindingsAccessor) {
            allBindingsAccessor = getInjectValueUpdate(allBindingsAccessor);
            return valueHandler.init(element, valueAccessor, allBindingsAccessor);
        },
        'update': valueHandler.update
    };
} ());

如果您不习惯“覆盖”value 绑定，您可以为覆盖的自定义绑定指定一个不同的名称并使用该绑定处理程序。

ko.bindingHandlers.realtimeValue = { 'init':..., 'update':... };

demo

这样的解决方案适用于 Knockout 2.x 版。 Knockout 团队通过 Knockout 版本 3 及更高版本中的 textInput 绑定，为类似文本的输入提供了更完整的绑定。它旨在处理文本输入和textarea 的所有文本输入方法。它甚至可以处理实时更新，从而有效地使这种方法过时。

Answer 4

Jeff Mercado 的回答非常棒，但不幸的是被 Knockout 3 打破了。

但我在完成 Knockout 3 更改时找到了 ko 开发人员建议的答案。请参阅https://github.com/knockout/knockout/pull/932 的底部 cmets。他们的代码：

//automatically add valueUpdate="afterkeydown" on every value binding
(function () {
    var getInjectValueUpdate = function (allBindings) {
        return {
            has: function (bindingKey) {
                return (bindingKey == 'valueUpdate') || allBindings.has(bindingKey);
            },
            get: function (bindingKey) {
                var binding = allBindings.get(bindingKey);
                if (bindingKey == 'valueUpdate') {
                    binding = binding ? [].concat(binding, 'afterkeydown') : 'afterkeydown';
                }
                return binding;
            }
        };
    };

    var valueInitHandler = ko.bindingHandlers.value.init;
    ko.bindingHandlers.value.init = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        return valueInitHandler(element, valueAccessor, getInjectValueUpdate(allBindings), viewModel, bindingContext);
    };
}());

http://jsfiddle.net/mbest/GKJnt/

编辑 Ko 3.2.0 现在有了一个更完整的解决方案，带有新的“textInput”绑定。查看 SalvidorDali 的回答