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

Question

我正在尝试使用 Meteor:Search-source 包为我在 Meteor 中的第一个应用程序实现响应式(Reactive)搜索功能。搜索功能运行良好。我有一个输入文本搜索字段和 2 个列表。称为“搜索结果”的第一部分获取我们搜索某个词时找到的项目(例如 try with 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) 在内部获取的。

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

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

因此，您不会通过包获得 react 性更改，并且它似乎不是适合您的情况的解决方案。

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

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