Riot JS Text 버그 검색

Question

Riot.js와 MV * 프레임 워크는 일반적으로 새롭습니다. 나와 함께하시기 바랍니다.

https://plnkr.co/edit/QY3aoA4JH7ps65mRwGoB?p=preview

나는 3 연락처 목록을 가지고있다. 텍스트 입력란을 사용하여 연락처를 이름으로 검색하고 싶습니다.

<application> 
    <input type="text" oninput={edit}> 

    <h2>List of possible candidates</h2> 
    <h3>{search}</h3> 

    <div if={contact.name.toUpperCase().includes(search.toUpperCase())} each={contact in contacts}> 
    {contact.name} 
    </div> 
    this.contacts = [ 
    {name : 'AMATO',  age : 20}, 
    {name : 'GROSSMAN',  age : 37}, 
    {name : 'OKAJA', age : 18}, 
    ] 

    search = ''; 

    edit(e){ 
    search = e.target.value 
    } 
</application> 

이것은 이상한 경우를 제외하고는 작동하는 것 같습니다. 예를 들어 "j"또는 "ok"를 입력하면 OKAJA가 반환되지만 대신 배열의 두 번째 항목이 반환됩니다. 내가 뭘 놓치고 있니? 또한 필터의 서식 지정/구문에 대한 더 나은 제안을 열어 두었습니다.

Answer 1

이것은 한 간단한 코드 줄로 해결되는 표면에서 실제로 복잡해 보이는 고전적인 경우입니다. edit 함수에 this.update()을 추가하십시오.

미성년자 : 내 Plunker 및 아래 코드 블록에서 search 대신 this.search을 사용하여 JS 코드에서 구분합니다. 이것은 이 아니며이 필요하고 this.update() 만 필요합니다.

는

<application> 
    <input type="text" oninput={edit}> 

    <h2>List of possible candidates</h2> 
    <h3>{search}</h3> 

    <div if={contact.name.toUpperCase().includes(this.search.toUpperCase())} each={contact in contacts}> 
     {contact.name} 
    </div> 
    this.contacts = [ 
     {name : 'AMATO',  age : 20}, 
     {name : 'GROSSMAN',  age : 37}, 
     {name : 'OKAJA', age : 18}, 
    ] 

    this.search = ''; 

    edit(e){ 
     this.search = e.target.value 
     this.update(); 
    } 
</application> 

Plunker.

지금, 왜 "은 특정 상황을"일어 났습니까 ? Riot.js가 주어진 엔트리를 여러 번 검사하려고 시도했는데 주어진 입력 세트에 대해 잘못된 결과 배열을 반환 한 것처럼 보입니다. 나는 '[abcde', 'bcdef', ..., 'efghi']와 같은 항목으로 크기 5의 입력 세트를 제공하려고했습니다. 'h'에 대한 질의를 받으면 인덱스 0, 1, 2, 3, 4, 3, 3, 4, 4를 순서대로 검사합니다. 인덱스 1과 3은 2, 3, 4 일 때 g가 포함 된 것으로 결정했습니다.이 테이크 어웨이는 작은 데이터 세트를 사용했기 때문에 운이 좋은 것입니다. 데이터 세트가 더 커지면 항목을 검색하면 눈부신 실패를 보게됩니다.