javascript - 在 Flow Router 上使用 URL 查询参数进行搜索

Question

我使用 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 中如何工作的文献，所以我将跳到您的搜索源问题。

我看到您想将搜索范围到某种语言。这是一个可以让您开始的基本设置。您还应该微调节流、元数据处理、限制、分页、输入和查询参数清理、结果转换等。

模板

<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");
}