javascript - KnockoutJs 过滤器搜索后清空列表

Question

我正在使用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]) 分配为可观察的名称，如代码。

该列表的目的是根据搜索框条目过滤内容，它最初显示所有名称，但是一旦我在搜索框中输入内容，名称列表就变成空的，可能是什么原因？有办法解决吗？

Answer 1

如果你想直接在 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"。