В настоящее время я изучаю нокаут и в настоящее время экспериментирую с различными вещами, которые могут быть достигнуты с помощью библиотеки. Одна вещь, которую я пытаюсь сделать правильно, - создать "живой поиск". (код ниже)
Ошибка, которую я получаю, не может считаться делом "toLowerCase" неопределенной. Для меня мой код выглядит правильно, и я догадываюсь, что там где-то есть ошибка новобранец.
Данные в self.tracks() извлекаются из soundcloud и вставляются в наблюдаемый массив. Мой HTML-шаблон отображает эти треки отлично, если я удаляю все экземпляры "computedTracks" - похоже, функция не может читать 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;
});
});
Если бы кто-нибудь мог выделить мою ошибку в этом, это было бы высоко оценено.
Полная демонстрация:
Проблема в том, что ваше начальное значение для функции searchQuery наблюдается в undefined. Вам либо нужно проверить, определено ли это, а затем вызвать toLowerCase() или установить для него значение по умолчанию ''. Так же, как в демоверсии codeopen.
self.searchQuery = ko.observable('');