Question

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

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

只有在搜索词不是空字符串时，才需要确保过滤器返回结果。这可以通过检查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/

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

1 个答案: