Comment rechercher une liaison de texte avec Durandal/Knockout Startkit?

Question

Le modèle Durandal Startkit ne contient pas de recherche implémentée (c'est OK). Ce que peut-être ce qu'il devrait avoir est une propriété observable et la lier. J'essaie de vous montrer ici comment lier un texte de recherche à cette démo, mais il recherche la mauvaise valeur (ancienne valeur).

Voici le ViewModel: Shell.js (hors de la boîte)

define(['plugins/router', 'durandal/app'], function (router, app) { 
    return { 
     router: router, 
     search: function() { 
      app.showMessage('Search not yet implemented...'); 
     }, 
     activate: function() { 
      router.map([ 
       { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true }, 
       { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true } 
      ]).buildNavigationModel(); 

      return router.activate(); 
     } 
    }; 
}); 

I ajouté la propriété observable: searchText et modifié la fonction de recherche pour afficher sa 'valeur':

searchText: ko.observable(), 
search: function() { 
    app.showMessage('Search not yet implemented... Searching for: ' + this.searchText()); 
}, 

et je lié à la vue: shell.html

<input type="text" class="search-query" placeholder="Search" data-bind="value: searchText"> 

Quelque chose ne va pas, la valeur dis joué dans la recherche est le ancienne valeur, pas l'actuel. Apparemment, la fonction de recherche est d'abord exécutée, puis la valeur de searchText est définie/mise à jour. Mais je ne suis pas sûr.

Comment nous pouvons résoudre ce problème? (pour utiliser la dernière valeur pendant la recherche)

Answer 1

La méthode de recherche est câblée avec data-bind="submit:search" mais KO écoute par défaut l'événement change sur les entrées lors de l'utilisation de la liaison value.

Cependant, lorsque vous appuyez sur Entrée et soumettez le formulaire de recherche, l'événement change de votre entrée ne se déclenche pas immédiatement, vous voyez donc la "vieille" valeur.

Vous pouvez résoudre ce problème avec l'aide de la valueUpdate: 'afterkeydown' (voir doc) afin KO mettra à jour votre searchText dès que vous tapez quelque chose dans:

<input type="text" class="search-query" placeholder="Search" 
     data-bind="value: searchText, valueUpdate: 'afterkeydown'">