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

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

来源

2017-10-10 Jake

你的意思是保持当搜索框为空，隐藏其他项目？像[这]（http://jsfiddle.net/4y8jgsyg/1/）？ – Nisarg

Knockout 1x真的很旧。 –

@NisargShah！谢谢。我知道KO 1已经过时了。（再次，这只是一个快速演示，而不是产品代码。） – Jake

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

来源

2017-10-10 18:37:09 Nisarg

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

回答

相关问题