javascript - 使用 Meteor Search-Source 包获取结果的 react 性问题

Question

我正在尝试使用 Meteor:Search-source 包为我在 Meteor 中的第一个应用程序实现响应式(Reactive)搜索功能。搜索功能运行良好。我有一个输入文本搜索字段和 2 个列表。第一部分称为“搜索结果”，获取当我们搜索某个单词时找到的项目(例如尝试使用 london)，第二部分获取我的集合中的所有项目。这些项目链接到响应式(Reactive)帮助器/模板函数。如果我投票赞成或反对，当我获得所有项目时， react 性工作正常。我可以实时看到它是如何更新的。但是，当我想要对搜索中找到的某些项目进行投票或反对时，投票和反对不会更新，就像找到的项目一样，失去了 react 性(我可以看到，如果我在第一部分中的某些项目中投票或反对(“搜索结果”)第二个列表中的项目(所有项目)正在正确更新....

这是我的应用程序My App

您可以在搜索字段中查看“伦敦”中的问题键，然后投赞成票或反对票，以查看第二个列表中的项目已正确更新，但如果您在“搜索结果”部分投赞成票或反对票，则该项目不起作用(无 react )。

客户端

//辅助函数

Template.searchResult.helpers({

   getItems: function() {
    return itemSearch.getData({
        transform: function(matchText, regExp) {
            return matchText.replace(regExp, "$&")
            },
      sort: {upvote: -1}
    });
  },

  isLoading: function() {
    return itemSearch.getStatus().loading;
    }
});

//此行默认返回所有文档(空搜索框文本为空时)

Template.searchResult.rendered = function() {
    itemSearch.search('');
};

服务器

  SearchSource.defineSource('items', function(searchText, options) {
  var options = {sort: {upvote: -1}, limit: 20};
 // var options = options || {};

 if(searchText) {
    var regExp = buildRegExp(searchText);
    /*var selector = {title: regExp, description: regExp};*/
    var selector = {$or: [
   {title: regExp},
   {description: regExp}
     ]};
   return Websites.find(selector, options).fetch();
   } else {
  return Websites.find({}, options).fetch();
    }
});
   function buildRegExp(searchText) {
    var words = searchText.trim().split(/[ \-\:]+/);
    var exps = _.map(words, function(word) {
    return "(?=.*" + word + ")";
 });
 var fullExp = exps.join('') + ".+";
 return new RegExp(fullExp, "i");
}

HTML

<!-- template that displays searched website items  -->
<template name="searchResult">
   <div class="container">
    <div class="jumbotron"> 
        <h3> Search results </h3>
            <ol>
                {{#each getItems}}
                    {{> website_item}}      
                {{/each}}
            </ol>
    </div>  
</div>

<!-- template that displays individual website entries -->
<template name="website_item">
    <li>
        <a href="{{url}}">{{title}}</a>
       <p>
            {{description}}
       </p>
      <a href="#" class="btn btn-default js-upvote">
        <span class="glyphicon glyphicon-arrow-up" aria-hidden="true">                </span>
    </a>
    <a href="#" class="btn btn-success">
                {{upvote}}
    </a>    

    <a href="#" class="btn btn-default js-downvote">
        <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
    </a>
    <a href="#" class="btn btn-danger">
                {{downvote}}
    </a>
    <p>
     Created On: {{createdOn}}
    </p>
    <a href="/details/{{_id}}" class="btn btn-success js-description">
                view web description
    </a>    
    <!-- you will be putting your up and down vote buttons in here! -->
</li>

一些建议？非常感谢!

Answer 1

返回的数据记录本身不是 react 性的，因为数据是使用方法调用 (search.source) 在内部获取的。

您将获得搜索时的数据快照。

此外，数据默认会被缓存，因此后续搜索同一term不会在一定时间内触发对服务器的请求。您可以通过 keepHistory 选项调整时间段。

因此，您将无法通过该软件包获得 react 性更改，并且它似乎不是适合您情况的适当解决方案。

您可以尝试通过订阅获取数据，并将搜索返回的数据映射到集合中的记录，但这似乎成本高昂。

另请参阅this issue ，这表明其他人也遇到过相同类型的问题。