敲除可观察字段未在输入值更改时更新
Posted
技术标签:
【中文标题】敲除可观察字段未在输入值更改时更新【英文标题】：Knockout observable field not updating on input value change 【发布时间】：2013-01-10 20:11:16 【问题描述】：我注意到我无法让某些 Knockout 现场教程或基本示例能够演示可观察数据绑定。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>
<script type="text/javascript" src="knockout.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function TestViewModel()
this.Name = ko.observable("Testing");
$(function()
ko.applyBindings(new TestViewModel());
);
</script>
</head>
<body>
<h1>Testing Knockout.js</h1>
<div>
<div>
<span data-bind="text: Name"></span>
</div>
<div>
<input type="text" data-bind="value: Name"></input>
</div>
</div>
</body>
</html>
因此，当我在 Google Chrome 或 Firefox 中打开它时，我希望 span 标签的值会随着我更改输入中的文本而改变，但事实并非如此。有人可以解释为什么上述方法不起作用吗？ （这段代码几乎是从网站上的文档中复制而来的）
谢谢， 亚历克斯。
【问题讨论】：
您的代码看起来运行良好：jsfiddle.net/FHGvy。你用的是什么版本的淘汰赛和 jquery？ 【参考方案1】：从 KO 版本 3.2 开始（正如 Salvador Dali answer's 指出的那样），您应该使用 textinput binding 进行即时更新：
<input data-bind="textInput: userName" />
如果您使用的是早期的 Knockout 版本和 value 绑定，那么您应该进行以下更改：
默认情况下，敲除会在更改事件上更新可观察对象的值（例如，当文本框的焦点丢失时）。
如果您想要即时更新，您需要指定valueUpdate 选项，其中可能的事件是：keyup、keypress、afterkeydown 请参阅documentation 中的更多信息。
所以改变你的value绑定：
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>
演示JSFiddle.
【讨论】：
啊，我现在觉得很傻，只是假设这将是一个 insta 更新并且我做错了什么。 @Alex：你并不孤单。更改输入字段中的值（而不是取消焦点）时，我也对缺乏更新感到震惊。这主要归功于 this really good video tutorial with Steve Sanderson，我发现它足够快，没有发布相同的问题 ;-) 使用 valueUpdate: 'input' 使其更新任何操作（粘贴、拖放、清除字段等...）afterkeydown 在 ios 7 上无法可靠运行，请参阅 github.com/knockout/knockout/issues/1118
伙计们，请阅读以下答案。 textInput 是今天解决这个问题的方法。【参考方案2】：
接受的答案是正确的，但在新的 KO 版本 3.2 中，他们添加了 textinput binding. 因此，您可以使用 textInput 代替 value 绑定：
<input data-bind="textInput: userName" />
它做了两件重要的事情：
立即更新 处理剪切、拖动、自动完成的浏览器差异...【讨论】：
非常感谢您的留言！在我的应用程序中几乎所有地方我都添加了 valueUpdate 以进行即时更新，这个新的绑定让生活更轻松。【参考方案3】：对于那些在这里徘徊的人（像我一样）想知道为什么它不起作用。请注意您额外的“（）”用法。这让我遇到了这样的嵌套可观察对象：
不好：
<input data-bind="textInput: subItem().userName()" />
好：
<input data-bind="textInput: subItem().userName" />
【讨论】：
以上是关于敲除可观察字段未在输入值更改时更新的主要内容，如果未能解决你的问题，请参考以下文章
KnockoutJS：模板未在可观察数组更改时更新（仅在添加时，在删除时有效）