web-dev-qa-db-ja.com

入力値の変更時にノックアウトの観測可能なフィールドが更新されない

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サイトのドキュメントからほとんどコピーされています）

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

javascriptdata-bindingknockout.js
27
Alex Hope O'Connor

KOバージョン3.2以降（ Salvador Daliの回答 指摘）、インスタント更新には textinput binding を使用する必要があります。

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

以前のKnockoutバージョンとvalueバインディングを使用している場合は、次の変更を行う必要があります。

デフォルトでは、ノックアウトは変更イベントでオブザーバブルの値を更新します（たとえば、テキストボックスのフォーカスが失われたとき）。

即時更新が必要な場合は、可能なイベントがvalueUpdate、keyup、keypressのafterkeydownオプションを指定する必要があります。 ドキュメント 。

したがって、valueバインディングを変更します。

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

デモ JSFiddle 。

58
nemesv

受け入れられた答えは正しいですが、新しいKOバージョン3.2では、 textinput binding。 が追加されました。したがって、valueバインディングの代わりにtextInputを使用できます。

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

2つの重要なことを行います。

  • すぐに更新する
  • カット、ドラッグ、オートコンプリートのブラウザの違いを処理します...
20
Salvador Dali

なぜ機能していないのか不思議に思う人（私のように）をここに迷い込む人のために。余分な「（）」の使用に注意してください。これにより、次のようなネストされたオブザーバブルで問題が発生しました。

悪い：

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

良い：

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