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

Question

我使用来自 A运行oda 的 Search Source, and Flow Router。他们都工作得很好，但我只是在努力让他们一起工作。

我有一个助手，returns 一些从服务器呈现的文档-运行 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'）中输入的语言作为查询参数注册的内容。假设在 "english" 中，如本例所示：

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 会为您设置必要的数据传送，因此您不必，实际上不应该为您的搜索流程设置发布或订阅。关于 pub/sub 如何在 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");
}

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

Search with the URL Query Parameters on Flow Router

javascript

url-routing

query-parameters

meteor

flow-router