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が返されますが、代わりに配列の2番目の項目が返されます。私は何が欠けていますか？また、フィルタの書式設定/構文に関するより良い提案をするためにも開いています。

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を含んでいることを決定しました。この小さなデータセットを使用して以来、あなたはラッキーです。データセットがさらに大きくなった場合、エントリを検索するとすばらしく失敗します。