it-swarm.com.de

Das beobachtbare Feld der Aussparung wird bei Änderung des Eingangswerts nicht aktualisiert

Ich habe festgestellt, dass ich einige der Knockout-Live-Tutorials nicht ausführen kann oder grundlegende Beispiele, die die beobachtbare Datenbindung demonstrieren sollen.

Hier ist mein Code:

<!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>

Wenn ich dies in Google Chrome oder Firefox öffne, würde ich erwarten, dass sich der Wert des span-Tags ändert, wenn ich den Text in der Eingabe ändere. Dies ist jedoch nicht der Fall. Kann jemand bitte erklären, warum das Obige nicht funktioniert? (Dieser Code wurde aus der Dokumentation auf der Website übernommen)

Danke, Alex.

27

Ab KO Version 3.2 (wie auf Salvador Dali answer hingewiesen) sollten Sie die textinput-Bindung für sofortige Aktualisierungen verwenden: 

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

Wenn Sie eine frühere Knockout-Version und die value-Bindung verwenden, sollten Sie folgende Änderungen vornehmen:

Standardmäßig aktualisiert die Aussparung den Wert der Observables für das Änderungsereignis (z. B. wenn der Fokus des Textfelds verloren geht). 

Wenn Sie ein sofortiges Update wünschen, müssen Sie die Option valueUpdate angeben. Mögliche Ereignisse sind: keyup, keypress, afterkeydown Weitere Informationen finden Sie in der documentation .

Ändern Sie also Ihre value-Bindung:

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

Demo JSFiddle .

57
nemesv

Die akzeptierte Antwort ist korrekt, aber in einer neuen KO-Version 3.2 wurde die Bindung von textinput hinzugefügt. So können Sie anstelle der value-Bindung textInput verwenden:

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

Es macht zwei wichtige Dinge:

  • sofortige Aktualisierungen vornehmen
  • behandelt Browser-Unterschiede beim Ausschneiden, Ziehen, automatischen Vervollständigen ...
20
Salvador Dali

Für diejenigen, die hier (wie ich) wandern und sich fragen, warum es nicht funktioniert. Achten Sie auf Ihre zusätzliche Verwendung von "()". Dies brachte mich in Schwierigkeiten mit einem verschachtelten Beobachtbaren wie diesem:

Schlecht:

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

Gut:

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