Riot JS Text Search bug

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

这是一个经典的案例，看起来问题看起来很复杂，只需一行简单的代码即可解决。将this.update()添加到edit函数。

小调：在你的Plunker和下面的代码块中，我用this.search而不是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试图多次检查给定条目，并且因此它返回给定输入集合的错误数组结果。我尝试给它一个大小为5的输入集，其中包含['abcde'，'bcdef'，...，'efghi']。当查询'h'时，按顺序检查索引0,1,2,3,4,3,3,4,4。它决定指数1和3包含g，当它应该是2,3,4。从这里得到的结果是，你运气很好，因为你使用了这样一个小数据集。如果数据集变大，搜索任何条目都会失败。