Knockout Live Search

0

В настоящее время я изучаю нокаут и в настоящее время экспериментирую с различными вещами, которые могут быть достигнуты с помощью библиотеки. Одна вещь, которую я пытаюсь сделать правильно, - создать "живой поиск". (код ниже)

Ошибка, которую я получаю, не может считаться делом "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;
                });
            });

Если бы кто-нибудь мог выделить мою ошибку в этом, это было бы высоко оценено.

Полная демонстрация:

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

Теги:
knockout.js
knockout-2.0

1 ответ

3
Лучший ответ

CodeOpen

Проблема в том, что ваше начальное значение для функции searchQuery наблюдается в undefined. Вам либо нужно проверить, определено ли это, а затем вызвать toLowerCase() или установить для него значение по умолчанию ''. Так же, как в демоверсии codeopen.

self.searchQuery = ko.observable('');
  • 0
    Конечно! Это был долгий день...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню