web-dev-qa-db-fra.com

Utilisation d'un événement de pression de touche dans le knockout JS

J'essaie de lire le contenu d'une zone de texte html et de récupérer des données à partir d'une API pour effectuer une saisie automatique de style Google. J'utilise Twitter bootstrap typeahead pour la fonctionnalité de saisie automatique. Pour cela, j'ai besoin d'enregistrer les touches lorsqu'elles sont enfoncées et d'appeler l'API avec le texte de la requête.

Voici le code HTML de la zone de texte

<input id="query" data-bind="value: query, valueUpdate: 'keypress', event: { keypress: check }"/>

Mon hypothèse était que cela mettra à jour la valeur dans le viewmodel dès que la touche est enfoncée, et la fonction check appellera en attendant l'API. Mais l'appel est effectué pour check () et la zone de texte n'est jamais remplie lorsque l'utilisateur tape. si le JS ressemble à ceci -

function check() {
    alert("Hello");     
    }

Pour chaque touche que j'appuie, bonjour apparaît, mais la zone de texte dans l'interface utilisateur HTML n'affiche pas la touche qui a été enfoncée/n'enregistre pas quelle touche a été enfoncée. Comment enregistrer la pression des touches et envoyer la demande simultanément?

javascriptjqueryhtmltwitter-bootstrapknockout.js
27
divyanshm
  1. assurez-vous que la requête est observable
  2. utilisation valueUpdate = 'afterkeydown'
  3. utilisation event: { 'keyup': check }:

J'utiliserais également console.log si possible par opposition à alert et je consignerais la requête pour vous assurer que la valeur est à jour. :) vous aussi je veux enregistrer l'événement comme ceci

function check(data, event) {
    console.log(event);
}

qui vous indiquera le code clé de la touche sur laquelle vous avez appuyé

41
egucciar

Ce fil est ancien, mais j'ai remarqué qu'il ne citait pas l'utilisation de la liaison textInput ​​de KO. Il s'agit d'une nouvelle fonctionnalité ajoutée dans la version 3.2.0.

La documentation KO, au moins à partir de maintenant (janvier 2015), traite spécifiquement de ce problème:

Remarque 1: textInput vs value binding

Bien que la liaison de valeur puisse également effectuer une liaison bidirectionnelle entre les zones de texte et les propriétés du modèle de vue, vous devriez préférer textInput chaque fois que vous souhaitez des mises à jour en direct immédiates.

Voir http://knockoutjs.com/documentation/textinput-binding.html

29
CSSian