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>

除了奇怪的情况外，这似乎有效。例如，输入＆＃34; j＆＃34;或者＆＃34;确定＆＃34;应返回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.

现在，为什么会发生这种情况＆＃34;仅在特定情况下？＃34;？似乎Riot.js试图多次检查一个给定的条目，因此它为给定的输入集返回了错误的结果数组。我尝试给它一个大小为5的输入集，其中包含[＆＃39; abcde＆＃39;，＆＃39; bcdef＆＃39;，...，＆＃39; efghi＆＃39;]等条目。当查询＆＃39; h＆＃39;时，它按顺序检查索引0,1,2,3,4,3,3,4,4。它确定指数1和3在它应该是2,3,4时包含g。这样做的结果是你很幸运，因为你使用了这么小的数据集。如果数据集变得更大，搜索任何条目都会失败。

Riot JS Text Search bug

1 个答案: