Question

我注意到我无法获得一些可以演示可观察数据绑定的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>

因此，当我在谷歌浏览器或Firefox中打开它时，我希望在更改输入中的文本时，span标记的值会发生变化，但事实并非如此。有人可以解释为什么以上不起作用？（此代码几乎是从网站上的文档中复制而来的）

谢谢，亚历克斯。

Answer 1

从KO版本3.2开始（如Salvador Dali answer's指出），您应该使用textinput binding进行即时更新：

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

在使用较早的Knockout版本和value绑定时，您应该进行以下更改：

默认情况下，knockout会更新change事件上observables的值（例如，当文本框的焦点丢失时）。

如果您想要即时更新，则需要指定valueUpdate选项，其中可能的事件为：keyup，keypress，afterkeydown请参阅{{3}中的更多信息}}

所以改变你的value绑定：

<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>

演示documentation。

Answer 2

接受的答案是正确的，但在新的KO版本3.2中，他们添加了textinput binding.因此，您可以使用value代替textInput绑定：

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

它做了两件重要的事情：

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

Answer 3

对于那些在这里徘徊的人（如我）想知道为什么它不起作用。请注意您额外的“（）”用法。这让我遇到了类似这样的嵌套可观察项的麻烦：

坏：

<input data-bind="textInput: subItem().userName()" />

好：

<input data-bind="textInput: subItem().userName" />

Knockout observable字段不会更新输入值更改

3 个答案: