通过单击边栏类别

Question

我有一个侧边栏中显示的类别列表（例如：食物，玩具，衣服等）。

在内容中，我有一个项目列表，每个项目都属于一个类别。我希望用户能够通过单击侧栏中的相应类别来对列表进行排序。

例如，如果他们仅点击食物，那么只会出现食物类别的食物。如果他们也点击玩具，则会出现食品和玩具类别中的商品。

我该如何设置？

感谢。

Answer 1

您可以这样做：

Template.filters.onCreated(function () {
  this.filters = new ReactiveVar({});
});

Template.filters.helpers({
  categories: function () {
    const instance = Template.instance();
    return Categories.find(instance.filters.get());
  }
});

Template.filters.events({
  // whenever a select is changed
  'change select.category-filter': function (e, template) {
    const categories = $(e.target).find('option:checked').reduce(function (query, node) {
      query[node.data.name] = this.value;
      return query;
    }, {});
    template.filters.set(categories); 
  }
});

响应式var将更改，更新帮助程序，然后更新查询。