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

这是方法：

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

以下是一种可能的实施方式：

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应用程序中更新客户端视图

1 个答案: