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

Question

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

服务器/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

方法如下：

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

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

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 上的文章。