使用iron-router过滤集合

Question

我有一个使用{{#each Collection}}渲染我的收藏的模板，我使用iron-router来路由这个模板，如下所示：

Router.route('/home', function () {
this.render('home');
this.layout('header');
});

如何使用"books“filter按钮以便iron-router将过滤器应用于订阅，以便我只能看到我收藏的过滤版本，如下所示：

Collection.find({category: "books"});

Answer 1

有许多方法可以实现这一点，但一种简单的方法是定义一个以类别为参数的子路由：

Router.route('/collections/:category',{
  name: 'collections',
  layoutTemplate: 'header',
  data(){
    return Collections.find({category: this.params.category});
  }
});

然后你的按钮代码就可以做Router.go('/collections/books')了，但是你现在可以有多个按钮，每个按钮都绑定到不同的类别。

Answer 2

按照这里的建议，https://guide.meteor.com/data-loading.html#organizing-subscriptions，你可以在模板中管理你的订阅，而不是在路线中。所以你可以这样做：

import {ReactiveDict} from 'meteor/reactive-dict';
import {Template} from 'meteor/templating';

Template.home.onCreated(function(){
  var that = this;
  that.state = new ReactiveDict();
  //that.state.set('selected-category',YOUR_DEFAULT_CATEGORY);
  that.autorun(function(){
    that.subscribe('subscription-name',that.state.get('selected-category'));
  });
});

Template.home.events({
  'click .js-category':function(e,tpl){
    let category = tpl.$(e.currentTarget).data('category');
    tpl.state.set('selected-category',category); 
  }
}); 

在您的模板中：

<button type="button" data-category="books" class="js-category">Books</button>

希望这将帮助您找到适合您的解决方案