使用表单输入在Meteor中的简单搜索功能

时间:2014-07-09 23:08:01

标签: meteor spacebars

所以我试图在我的Meteor应用程序中实现一个非常简单的搜索功能。它是一个非常简单的医学词典应用程序,所以我只有一个集合,其中包含所有术语以及它们各自的定义,发音等。我的目标是让用户使用表单输入和显示输入他们的搜索查询相关的搜索结果(在点击提交之后,在keyup或keydown事件之后,现在并不重要;这只是一个原型)。这是我到目前为止所拥有的。

搜索栏 (名为header.html的模板的一部分)

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" id="search" name="search" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

事件处理程序 (名为header.js

Template.header.events({
'submit form': function(e) {
    e.preventDefault();
    var query = $(e.target).find('[name=search]').val();

    // Log the query for testing
    console.log(query);

    //Log the object that is returned for testing
    console.log(Dictionary.find({english: query}).fetch());

    var result = Dictionary.find({english: query}).fetch();

  }
});

结果列表 (这是在名为itemsList.html的模板中无效的部分

<template name="itemsList">
  <div class="items">
    {{#each dictionary}}
      <ul>
        <!-- itemPage just refers to the page individual items -->
        <li><a href="{{pathFor 'itemPage'}}">{{english}}</a></li>
      </ul>
    {{/each}}
  </div>
</template>

在这种情况下,{{english}}指的是我想要搜索的集合中的数据(集合Dictionary中的英文单词)。

所以,既然我已经完成了所有这些,那么我的问题是:我该怎么做?在header.js中,来自console.log(Dictionary.find({english: query}).fetch());的结果是我正在寻找的对象,所以基本上,我必须做什么来发送该对象/那些对象到我的itemsList.html模板,所以我可以用光标迭代它?

我认为我已经在这方面工作太久了,因为我确信解决方案非常简单。任何帮助都表示赞赏,如果我的方法完全错误(我在很多人看到很多人在搜索时使用会话),请告诉我应该做些什么。此外,我使用铁路由器并关闭了自动发布,所以如果需要对这些内容进行更改,请告诉我。谢谢!

1 个答案:

答案 0 :(得分:0)

只需将搜索字符串保存在会话中,并使用会话作为参数进行订阅(如果存在),这样您就可以动态订阅填充模板所需的数据