使用流路由器上的 URL 查询参数进行搜索

Question

我使用来自 Arunoda 的 Search Source 和 Flow Router。他们都工作得很好，但我只是在努力让他们一起工作。

我有一个帮助器，它返回一些从服务器运行的SearchSource 方法呈现的文档，如下所示：

Template.search.helpers({
  things: function() {
    var currentUserId = Meteor.userId();
    var langParam = FlowRouter.current().queryParams.lang;
    console.log(langParam);
    return BookSearch.getData({
      sort: {date_added: -1}
    });
  }
});

如您所见，我只是想搜索以 URL 中输入的语言（例如“en”）作为查询参数注册的内容。让我们在这个例子中用“英语”说：

http://localhost:3000/search?lang=en

我可以通过以下代码完美地阅读“en”并登录控制台，但无法搜索。我的意思是因为这段代码：

var langParam = FlowRouter.current().queryParams.lang;
console.log(langParam);

我在浏览器控制台上打印了“en”。但是我没有得到以“en”语言注册的东西。

那么如何使用查询参数实现正确的搜索？

我需要知道的是如何输入帮助程序以仅呈现获取到我想要的条件的数据（在这种情况下，英语 - {lang: langParam}。为此使用Package.getData() API，但我找不到确切的方法。

Answer 1

首先，searchsource 会为您设置必要的数据传输，因此您不必，实际上也不应该为您的搜索流设置发布或订阅。关于 Meteor 中 pub/sub 如何工作的文献有很多，所以我将直接跳到您的搜索源问题。

我看到您希望将搜索范围 扩展到某种语言。这是一个基本的设置，可以让你继续前进。您还应该微调诸如节流、元数据处理、限制、分页、输入和查询参数清理、结果转换等内容。

模板

<template name="booksearch">
  <form name="booksearch"><input type="search"/></form>
  <ul>
    {{#each hits}}
      <li>{{title}}</li>
    {{#each}}
  </ul>
</template>

客户：设置你的助手

var options = {
  // cache the search results for 5 minutes
  keepHistory: 1000 * 60 * 5,
  // allow fast local searches on the cache
  localSearch: true
};
// feed the search to the title field only
var fields = ['title'];
// Set up your search
BookSearch = new SearchSource('books', fields, options);

/*
  get the search results reactively. mind you, this is not an invocation.
  you'll invoke the search within your event handler down below
*/
Template.booksearch.helpers({
  hits : function() {
    return BookSearch.getData();
  }
})

Template.booksearch.events({
  'submit form': function(e,t) {
    // listen for the submit event
    e.preventDefault();
    var options = {
      // this is your lang query param from the url
      lang: FlowRouter.getQueryParam('lang')
    };
    // value of the search input from your template
    var searchText = t.$('input').val();
    // invoke the search using the input and the language
    BookSearch.search(searchText,options);
  }
})

服务器：设置您的搜索

SearchSource.defineSource('books', function(searchText, options) {
  // make sure you do have a lang option or use a default one
  var lang = options.lang || 'english'
  if(searchText) {
    var regExp = buildRegExp(searchText);
    // use the input and lang to build your mongodb selector
    var selector = {title: regExp, language: lang};
    return Books.find(selector).fetch();
  } else {
    // don't return anything if nothing is searched for
    return [];
  }
});

function buildRegExp(searchText) {
  // copied over from the naive github example
  var parts = searchText.trim().split(/[ \-\:]+/);
  return new RegExp("(" + parts.join('|') + ")", "ig");
}