녹아웃 라이브 검색

Question

저는 현재 녹아웃을 배우고 있으며 현재 라이브러리로 얻을 수있는 다양한 것들을 실험하고 있습니다. 내가 옳은 일을하려고하는 한 가지는 '라이브 검색'을 만드는 것입니다. (codepen 아래)

내가 받고있는 오류는 정의되지 않은 'toLowerCase'를 올바르게 읽을 수 없습니다. 내게는 내 코드가 제대로 보이고 어딘가에 신참 오류가 있다고 생각합니다.

self.tracks()의 데이터가 soundcloud에서 가져와 observableArray로 푸시됩니다. 내 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

Answer 1

CodeOpen

문제는 관찰 및 SearchQuery에 대한 초기 값이 undefined로 설정되어 있다는 점이다. 정의되어 있는지 확인한 다음 LowerCase()를 호출하거나 기본값을 ''로 설정해야합니다. 내가 codeopen 데모에서했던 것처럼.

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