29

我注意到我无法让一些 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 标签的值会随着我更改输入中的文本而改变,但事实并非如此。有人可以解释为什么上述方法不起作用吗?(此代码几乎是从网站上的文档中复制的)

谢谢,亚历克斯。

4

3 回答 3

60

从 KO 版本 3.2 开始(正如Salvador Dali 的回答所指出的),您应该使用textinput绑定进行即时更新:

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

如果您使用的是早期的 Knockout 版本和value绑定,那么您应该进行以下更改:

默认情况下,敲除会在更改事件上更新可观察对象的值(例如,当文本框的焦点丢失时)。

如果您想要即时更新,您需要指定valueUpdate可能事件所在的选项:keyup, keypress,请参阅文档afterkeydown中的更多信息。

所以改变你的value绑定:

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

演示JSFiddle

于 2013-01-27T09:20:41.933 回答
20

接受的答案是正确的,但在新的 KO 版本 3.2 中,他们添加了textinput 绑定。value因此,您可以使用以下方式代替绑定textInput

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

它做了两件重要的事情:

  • 立即更新
  • 处理剪切,拖动,自动完成的浏览器差异......
于 2014-08-25T19:40:12.300 回答
1

对于那些在这里徘徊的人(像我一样)想知道为什么它不起作用。请注意您额外的“()”用法。这让我遇到了这样的嵌套可观察对象:

坏的:

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

好的:

<input data-bind="textInput: subItem().userName" />
于 2018-11-14T20:43:44.847 回答