我尝试按可观察数组的名称搜索。这是我的代码:
<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autocomplete="off">
以及我在ViewModel中的代码
viewModel.Query = ko.observable('');
viewModel.search = function(value) {
viewModel.TestList.removeAll();
for (var x in viewModel.TestList) {
if (viewModel.TestList[x].Name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.TestList.push(viewModel.TestList[x]);
}
}
}
viewModel.Query.subscribe(viewModel.search);
首先:我想按名称字符串搜索。第二:是否有其他解决方案无法从视图中删除所有元素?我的意思是当查询字符串为空时,应该再次列出所有列表。
现在我有错误信息:
TypeError: viewModel.TestList[x].Name is undefined
沿着这些行使用可计算的可观察数组显示搜索结果:
var viewModel = {
items: [ { Name: "Apple part" }, { Name: "Apple sauce" }, { Name: "Apple juice" }, { Name: "Pear juice" }, { Name: "Pear mush" }, { Name: "Something different" } ]
};
viewModel.Query = ko.observable('');
viewModel.searchResults = ko.computed(function() {
var q = viewModel.Query();
return viewModel.items.filter(function(i) {
return i.Name.toLowerCase().indexOf(q) >= 0;
});
});
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autocomplete="off">
<h3>Search results:</h3>
<ul data-bind="foreach: searchResults">
<li data-bind="text: Name"></li>
</ul>
<h3>All items:</h3>
<ul data-bind="foreach: items">
<li data-bind="text: Name"></li>
</ul>
这也消除了订阅或单独功能的需要。
此示例利用:
observableArray
用于存储all observableArray
(此列表始终相同,无论您的搜索查询是什么);items
将返回与您的查询匹配的项目的筛选数组;filter
method上调用它,但是KO只是将其转发到基础数组);]]如您在示例中看到的,filter
将始终包含所有对象,并且observableArray
只是该数组上的筛选后的只读视图。
我正在尝试类似的方法,但略有不同: