web-dev-qa-db-fra.com

Le champ observable Knockout ne se met pas à jour lors du changement de valeur d'entrée

J'ai remarqué que je ne peux pas utiliser certains tutoriels en direct Knockout ou des exemples basiques qui devraient démontrer la liaison de données observable.

Voici mon 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>

Ainsi, lorsque je l'ouvre dans Google Chrome ou Firefox, je m'attends à ce que la valeur de la balise span change à mesure que je modifie le texte dans l'entrée, mais ce n'est pas le cas. Quelqu'un peut-il s'il vous plaît expliquer pourquoi ce qui précède ne fonctionne pas? (Ce code a été copié à peu près de la documentation sur le site Web)

Merci, Alex.

javascriptdata-bindingknockout.js
27
Alex Hope O'Connor

À partir de la version 3.2 de KO (en tant que les réponses de Salvador Dali ont été soulignées), vous devez utiliser la liaison textinput pour les mises à jour instantanées: 

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

Dans vous utilisez une version antérieure de Knockout et la liaison value, vous devez alors apporter les modifications suivantes:

Par défaut, knockout met à jour la valeur des observables sur l'événement de modification (par exemple, lorsque le focus de la zone de texte est perdu). 

Si vous souhaitez une mise à jour instantanée, vous devez spécifier l'option valueUpdate où les événements possibles sont: keyup, keypress, afterkeydown voir plus d'informations dans le documentation .

Alors changez votre liaison value:

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

Démo JSFiddle .

57
nemesv

La réponse acceptée est correcte, mais dans une nouvelle version 3.2 de KO, ils ont ajouté textinput binding. Donc au lieu de value binding, vous pouvez utiliser textInput:

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

Il fait deux choses importantes:

  • faire des mises à jour immédiates
  • gère les différences de navigateur pour couper, glisser, complétion automatique ...
20
Salvador Dali

Pour ceux qui errent ici (comme moi) en se demandant pourquoi cela ne fonctionne pas. Soyez conscient de votre utilisation supplémentaire '()'. Cela m'a mis en difficulté avec un observable imbriqué comme ceci:

Mal:

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

Bien:

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