我将如何隐藏数据并仅在匹配时显示？答案

【问题标题】：How would I hide the data and only show when there's a match?我将如何隐藏数据并仅在匹配时显示？
【发布时间】：2018-03-22 03:22:10
【问题描述】：

Knockout 新手，只是为了演示目的而尝试展示一个快速的数据绑定示例。我想隐藏列表项中的文本，只显示匹配项。

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);

【问题讨论】：

您的意思是在搜索框为空时隐藏其他项目吗？喜欢this？
淘汰赛 1x 真的很老了。
@NisargShah 完全正确！谢谢。我知道 KO 1 已经过时了。（同样，这只是一个快速演示，而不是生产代码。）

标签： knockout.js data-binding

【解决方案1】：

您需要确保过滤器仅在搜索词不是空字符串时才返回结果。这可以通过检查search.length > 0 轻松完成，如果是则返回一个空数组。

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);

这是更新后的小提琴：http://jsfiddle.net/4y8jgsyg/1/

【讨论】：