javascript - Riot JS 文本搜索错误

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。当它应该是 2、3、4 时，它决定索引 1 和 3 包含 g。由此得出的结论是你很幸运，因为你使用了这么小的数据集。如果数据集变得更大，搜索任何条目都会失败。