在 MeteorJS 应用程序中更新客户端视图

Question

我是 MeteorJS 的新手，我对订阅和出版物有一些不了解的地方。我有一个平板电脑系列。这是我删除了自动发布的设置。

Server/publictions.js

Meteor.publish('tablets', function() {
   return Tablets.find({}, {sort: {manufacturer: 1}});
});

在Client/view.js

Meteor.subscribe('tablets');

Template.tabletsList.helpers({
   tablets: function() {
     return Tablets.find();
   }
});

然后在client/view.html

{{#each tablets}}
   {{> tabletPreview}}
{{/each}}

一切正常，我可以看到我的平板电脑。但现在我有一个搜索框，当提交搜索时，我想更新平板电脑视图以仅显示搜索结果。

我有一个事件处理程序，但无法弄清楚如何更新平板电脑以仅显示搜索结果，因为以下代码不起作用。我应该改用会话还是有一个全新的视图。

client.view.js

Template.tabletsList.events({
  "click .search": function (event, template) {
     var query = $('input[name=search]').val();
     Template.tabletsList.tablets = Tablets.find({manufacturer: query}, {sort: {manufacturer: 1}});
   }
});

Answer 1

方法如下：

在创建时向您的模板添加一个反应变量，用于保存用户的上次搜索。
当用户更新搜索时，您应该更新反应变量。
在您的帮助程序中使用反应变量来仅获取匹配的文档。

这是一种可能的实现方式：

Template.tabletsList.created = function() {
  // add a reactive variable to this template to track the search
  this.search = new ReactiveVar('');
};

Template.tabletsList.events({
  'click .search': function (event, template) {
     var query = $('input[name=search]').val();
     // update the search based on the user's input
     template.search.set(query);
   }
});

Template.tabletsList.helpers({
  tablets: function() {
    // read the user's last search (if any)
    var search = Template.instance().search.get();
    // sort options
    var options = {sort: {manufacturer: 1}};

    if (search.length) {
      // find all tablets matching the search expression
      var re = new RegExp(search);
      return Tablets.find({manufacturer: re}, options);
    }
    else {
      // if the user didn't input a search just find all tablets
      return Tablets.find({}, options);
    }
  }
});

备注：

有关范围反应性的更多详细信息，请参阅this post。
在大多数情况下，在发布中排序实际上对您没有任何帮助。请参阅我在 common mistakes.

在 MeteorJS 应用程序中更新客户端视图

Updating client view in MeteorJS application

meteor