Knock-out observables de terrain pas de mise à jour sur l'entrée de changement de valeur

J'ai remarqué que je ne peux pas obtenir de la knock-out live tutoriels de travail ou des exemples de base que doivent démontrer les observables de la liaison de données.

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>

Alors, quand j'ai ouvert ce dans Google Chrome ou Firefox, j'attendrais la valeur de la balise span changer comme je l'ai modifier le texte dans l'entrée, mais ce n'est pas le cas. Quelqu'un peut-il expliquer pourquoi le ci-dessus ne fonctionne pas? (Ce code a été assez bien copié à partir de la documentation sur le site web)

Grâce,
Alex.

Votre code semble et fonctionne très bien: jsfiddle.net/FHGvy. Quelle est la version de knock-out et jquery utilisez-vous?

InformationsquelleAutor Alex Hope O'Connor | 2013-01-27

58

De KO version 3.2 (comme Salvador Dali réponse souligné), vous devez utiliser le textinput de liaison pour les mises à jour instantanée:
```
<input data-bind="textInput: userName" />
```
Dans vous utilisez une version antérieure du knock-out de la version et de la value de liaison, alors vous devez apporter les modifications suivantes:

Par défaut knock-out met à jour la valeur de la observables sur le changement de l'événement (e.g lorsque la mise au point de la zone de texte est perdu).

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

Donc changer votre value de liaison:
```
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>
```
Démo JSFiddle.
- Ah ben je me sens bête maintenant, il suffit de penser que ce serait un insta-mise à jour et que j'ai fait quelque chose de mal.
- vous n'êtes pas seul. J'ai également été surpris par le manque de mise à jour lors de la modification de la valeur dans le champ de saisie (et pas unfocussing il). C'était surtout grâce à cette vidéo vraiment bon tutoriel avec Steve Sanderson que j'ai compris assez vite, pour ne pas poster la même question 😉
- utilisation valueUpdate: 'entrée' pour faire la mise à jour sur une action (coller, glisser-déplacer, effacer le champ, etc...)
- afterkeydown ne fonctionne pas de manière fiable sur iOS 7, voir github.com/knockout/knockout/issues/1118
- Les gars, lisez ci-dessous la réponse ainsi. textInput est la façon de résoudre ce problème aujourd'hui.
- vous avez sauvé ma journée. thx a lot. mais textInput ne semblent pas fonctionner. aucune raison >?
InformationsquelleAutor nemesv
20

Accepté la réponse est correcte, mais dans un nouveau KO, version 3.2, ils ont ajouté textinput de liaison. Ainsi, au lieu de value la liaison, vous pouvez utiliser textInput:
```
<input data-bind="textInput: userName" />
```
Il fait deux choses importantes:
- faire la mise à jour immédiate
- poignées navigateur différences pour la coupe, la traînée, la saisie semi-automatique ...
- Merci beaucoup pour cette remarque! Presque partout dans mon application, j'ai ajouté valueUpdate pour l'instant de mise à jour, cette nouvelle liaison qui rend la vie plus facile.
InformationsquelleAutor Salvador Dali
0

Pour ceux qui errent dans ici (comme moi) vous vous demandez pourquoi il n'est pas de travail. Soyez conscient de votre extra '()' utilisation. Cela m'a mis dans la difficulté avec un imbriquée observables comme ceci:

Mauvais:
```
<input data-bind="textInput: subItem().userName()" />
```
Bon:
```
<input data-bind="textInput: subItem().userName" />
```
InformationsquelleAutor Rafe Smith

Vous devez vous connecter pour publier un commentaire.