Question

我目前正在学习淘汰赛，目前正在试验图书馆可以实现的各种各样的事情。我正在努力做的一件事是创建一个“实时搜索”。（下面的代码）

我得到的错误是无法读取未定义的'toLowerCase'。对我来说，我的代码看起来正确，我猜测某处有一个新手错误。

self.tracks（）中的数据从soundcloud中获取并推送到observableArray中。如果删除'computedTracks'的所有实例，我的HTML模板会很好地渲染这些轨道 - 看起来该函数无法读取self.tracks（）？

HTML：

<input placeholder="Search..." type="search" data-bind="value: searchQuery">

<div class="view-tracks">
    <ul data-bind="foreach: computedTracks">
        <li data-bind="click: $root.goToTrack">
            <span data-bind="text: track"></span>
        </li>
    </ul>
</div>

KO：

self.computedTracks = ko.computed(function() {
                return ko.utils.arrayFilter(self.tracks(), function(item) {
                    return item.track.toLowerCase().indexOf(self.searchQuery().toLowerCase()) >= 0;
                });
            });

如果有人可以突出我的错误，那将非常感激。

完整演示：

http://codepen.io/anon/pen/EHgdx

Answer 1

CodeOpen

问题是searchQuery observable的初始值设置为undefined。您要么必须检查它是否已定义，然后调用toLowerCase（）或为其设置默认值''。就像我在codeopen演示中所做的那样。

self.searchQuery = ko.observable('');

淘汰实时搜索

1 个答案: