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 タグの値が変更されることが予想されますが、そうではありません。上記が機能しない理由を誰か説明してもらえますか？(このコードは、Web サイトのドキュメントからほとんどコピーされたものです)

ありがとう、アレックス。

4

3 に答える 3

60

KO バージョン 3.2 の時点で (サルバドール・ダリの回答が指摘しているように) 、即時更新には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 に答える