这个敲除 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>
First name:
Last name:
从文档
附加参数 价值更新 如果您的绑定还包括一个名为 valueUpdate 的参数,这将定义 KO 应该使用哪个浏览器事件来检测更改。以下字符串值是最常用的选择: * “change”(默认) - 当用户将焦点移动到不同的控件时更新您的视图模型,或者在元素的情况下,在任何更改后立即更新您的视图模型 * "keyup" - 当用户释放一个键时更新你的视图模型 * "keypress" - 当用户输入一个键时更新你的视图模型。与 keyup 不同,这会在用户按住键时重复更新 * “afterkeydown” - 一旦用户开始输入字符,就会更新您的视图模型。这是通过捕获浏览器的 keydown 事件并异步处理事件来实现的。 在这些选项中,如果您想实时更新视图模型,“afterkeydown”是最佳选择。
如果您的绑定还包括一个名为 valueUpdate 的参数,这将定义 KO 应该使用哪个浏览器事件来检测更改。以下字符串值是最常用的选择:
* “change”(默认) - 当用户将焦点移动到不同的控件时更新您的视图模型,或者在元素的情况下,在任何更改后立即更新您的视图模型 * "keyup" - 当用户释放一个键时更新你的视图模型 * "keypress" - 当用户输入一个键时更新你的视图模型。与 keyup 不同,这会在用户按住键时重复更新 * “afterkeydown” - 一旦用户开始输入字符,就会更新您的视图模型。这是通过捕获浏览器的 keydown
事件并异步处理事件来实现的。
在这些选项中,如果您想实时更新视图模型,“afterkeydown”是最佳选择。