我将如何隐藏数据并仅在匹配时显示?
问题描述:
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);
答
您需要确保过滤器返回结果只有当检索词是不是空字符串。这可以通过检查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/
你的意思是保持当搜索框为空,隐藏其他项目?像[这](http://jsfiddle.net/4y8jgsyg/1/)? – Nisarg
Knockout 1x真的很旧。 –
@NisargShah!谢谢。我知道KO 1已经过时了。 (再次,这只是一个快速演示,而不是产品代码。) – Jake