javascript - knockout 实时搜索

Question

我目前正在学习 knockout ，并且正在尝试使用该库可以实现的各种功能。我想做的一件事是创建“实时搜索”。 (下面是代码笔)

我收到的错误是无法读取未定义的属性“toLowerCase”。对我来说，我的代码看起来是正确的，我猜测某个地方存在新手错误。

self.tracks() 中的数据从 soundcloud 中获取并推送到 observableArray 中。如果我删除“compulatedTracks”的所有实例，我的 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 可观察值的初始值设置为未定义。您必须检查它是否已定义，然后调用 toLowerCase() 或为其设置默认值 '' 。就像我在 codeopen 演示中所做的那样。

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