Comment cacher les données et montrer seulement quand il y a une correspondance?

Question

Nouveauté de Knockout et simplement essayer de montrer un exemple rapide de liaison de données à des fins de démonstration seulement. Je veux garder le texte dans les éléments de liste cachés, et montre juste les allumettes.

http://jsfiddle.net/4y8jgsyg/

var viewModel = { 
    query: ko.observable('') 
}; 

viewModel.beers = ko.dependentObservable(function() { 
    var search = this.query().toLowerCase(); 
    return ko.utils.arrayFilter(beers, function(beer) { 
     return beer.name.toLowerCase().indexOf(search) >= 0; 
    }); 
}, viewModel); 

ko.applyBindings(viewModel); 

Answer 1

Vous devez vous assurer que les résultats des rendements de filtre uniquement si le terme de recherche n'est pas une chaîne vide. Cela peut être facilement accompli en vérifiant search.length > 0 et retourner un tableau vide si c'est le cas.

viewModel.beers = ko.dependentObservable(function() { 
    var search = this.query().toLowerCase(); 
    if(search && search.length > 0) { 
     return ko.utils.arrayFilter(beers, function(beer) { 
      return beer.name.toLowerCase().indexOf(search) >= 0; 
     }); 
    } else { 
     return []; 
    } 
}, viewModel); 

est ici le violon mis à jour: http://jsfiddle.net/4y8jgsyg/1/