我正在使用KnockoutJs构建一个搜索列表,代码如下:
HTML:
<input type="search" id="search-bar" placeholder="Enter a name" data-bind="value:query,valueUpdate: 'keyup'">
<div id="list" data-bind='template: {foreach: name}'>
<li data-bind='text $data'></li>
</div>
部分Js搜索功能:
this.name = ko.observable('');
this.query = ko.observable('');
this.search = function (value) {
self.name([]);
for (var x in name) {
if (name[x].toLowerCase().indexOf(value.toLowerCase()) >= 0) {
self.name.push(name[x]);
}
}
}
this.query.subscribe(self.search);
使用 $.get 从不同的 URL 检索数据(二维列表),然后进行解析,然后我将解析数据的每个第一个条目 (arsed_data[i][0]) 分配为可观察的名称,如代码。
该列表的目的是根据搜索框条目过滤内容,它最初显示所有名称,但是一旦我在搜索框中输入内容,名称列表就变成空的,可能是什么原因?有办法解决吗?
最佳答案
如果你想直接在 observable 上使用像 push
这样的数组方法,你需要将其设置为 observable array ,不仅仅是一个可观察的。例如:
this.name = ko.observableArray();
不是
this.name = ko.observable('');
即使你稍后有了 self.name([])
,可观察值仍然只是一个可观察值(其值是一个数组),而不是一个可观察数组。
(我假设您在所显示的代码上方有 var self = this;
。)
此外,由于它是一个名称数组,因此您可能希望将其称为names
,而不是name
。
旁注:如果 for (var x in name) {
中的 name
是一个数组,则不应该这样循环遍历数组。请参阅this question's answers了解循环数组的各种正确方法。
旁注 2:HTML 中的 template
绑定(bind)似乎很可疑。您直接在此处提供 HTML,而不是在单独的模板中提供。所以它应该只是 data-bind="foreach: name"
。
关于javascript - KnockoutJs 过滤器搜索后清空列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47472867/