KnockoutJS搜索过滤器失效求助：基于ViewModel的搜索功能无法正常运行

我目前正在用 JavaScript + KnockoutJS 开发一个基于 ViewModel 的搜索过滤器功能，但怎么都跑不起来。已经把视图模型里的 locations[] 数组声明成 ko.observableArray() 了，可还是没效果。下面是我的代码文件，麻烦帮忙看看问题出在哪？

JavaScript 代码 #

// 示例代码，实际以我的代码为准
function ViewModel() {
    var self = this;
    self.locations = ko.observableArray([
        { name: "New York", country: "USA" },
        { name: "London", country: "UK" },
        { name: "Paris", country: "France" }
    ]);
    self.searchQuery = ko.observable("");
    self.filteredLocations = ko.computed(function() {
        var query = self.searchQuery().toLowerCase();
        return self.locations().filter(function(location) {
            return location.name.toLowerCase().includes(query) || location.country.toLowerCase().includes(query);
        });
    });
}

// 原代码绑定位置
ko.applyBindings(new ViewModel());

HTML 代码 #

<!-- 示例代码，实际以我的代码为准 -->
<input type="text" data-bind="value: searchQuery" placeholder="搜索地点...">
<ul data-bind="foreach: locations">
    <li><span data-bind="text: name"></span>, <span data-bind="text: country"></span></li>
</ul>

帮你梳理几个常见的排查方向，大概率能找到问题所在： #

• 绑定时机是否正确
  很多新手容易踩这个坑：如果你的JS代码放在页面 <head> 标签里，执行 ko.applyBindings 的时候DOM元素还没加载完成，绑定自然就失效了。解决办法是把绑定代码包裹在DOM加载完成的事件里：

  document.addEventListener('DOMContentLoaded', function() {
      ko.applyBindings(new ViewModel());
  });
  

• 计算属性的取值是否正确
  Knockout的 observable 和 observableArray 都需要加括号 () 才能获取当前值，要是你在过滤逻辑里直接写 self.searchQuery 或者 self.locations，那肯定拿不到正确的内容。可以打开浏览器控制台，打印 self.filteredLocations() 看看返回的结果是不是符合预期。

• 视图绑定是否对应正确
  检查一下输入框有没有加 valueUpdate 绑定：默认情况下Knockout只有在输入框失去焦点时才会更新 searchQuery，如果没加 valueUpdate: 'keyup' 或者 valueUpdate: 'input'，就会感觉搜索没反应。另外还要确认列表的 foreach 绑定的是过滤后的 filteredLocations，而不是原始的 locations 数组——这是最容易忽略的点！

• 异步数据加载的问题
  如果你的 locations 数据是异步获取的（比如从接口请求），要确保数据返回后用 self.locations(newData) 来更新数组，而不是直接用普通数组的修改方法（比如 push 虽然 observableArray 支持，但一次性替换数组时一定要用赋值触发响应式更新）。

• 大小写敏感的坑
  要是你的过滤逻辑没统一大小写，比如用户输入“new york”但数据里是“New York”，就会匹配失败。记得把查询字符串和数据都转成小写（或大写）再做比较，就像示例代码里那样。

内容的提问来源于stack exchange，提问作者Tan