javascript - 基于 meteor 中选择下拉框的过滤器集合

Question

我正在尝试根据从选择下拉列表中选择的值来过滤我的收藏。我已经尝试过解决方案 here和 here它对我来说还不够用。下面是我要过滤的模板。选择下拉列表在另一个模板中 categoryFilter我在这里使用 {{> categoryFilter}} 调用它过滤 {{#each car}} 下的集合列表堵塞。我在架构中使用的字段是 ccategory我想过滤

<template name="carsList">
  <div class="col s12 filter-holder">
        <div class="col m4 s4 filter-box">
          {{> categoryFilter}}
        </div>
 </div>

<div class="col s12">
 <ul class="collection" id="listings">
{{#each cars}}
<li>
  {{> carItem}}
</li>
{{/each}}
</ul>
</div>
</template>

这是我现有的调用所有汽车的助手

Template.carsList.helpers ({
'allCars': function() {
  return Cars.find();
},
});

这就是我的事件的样子。 var pageSession=ReactiveDict();

 Template.carsList.events({
  "click .categoryselection": function(e, t){
 var text = $(e.target).text();
  pageSession.set("selectedCategory",text);
 }
 });

我正在使用 ReactiveDict()这个过滤的包。我现在做吗？我如何过滤值并在 <ul> 上调用它们列表和筛选 <li>值(value)观。请帮助我

Answer 1

因为您一次只存储一个值(所选类别)，所以在这种情况下没有必要使用 ReactiveDict，对吗？如果是这样，您可以使用 ReactiveVar 来完成相反:

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

Template.carsList.helpers ({
'allJobs': function() {
  var category = Template.instance().selectedCategory.get();
  return Cars.find(category ? {ccategory: category} : {});
},
});

 Template.carsList.events({
  "click .categoryselection": function(e, t){
 var text = $(e.target).text();
  t.selectedCategory.set(text);
 }
 });

如果您仍想对多个过滤器值(例如 ccategory 和 city)使用 ReactiveDict，您可以使用:

Template.carsList.helpers ({
'allJobs': function() {
  var filter = {};
  var category = pageSession.get("selectedCategory");
  var city = pageSession.get("selectedCity");
  if (city)
    filter.city = city;
  if (category)
    filter.ccategory = category;
  return Cars.find(filter);
},
});

 Template.carsList.events({
  "click .categoryselection": function(e, t){
 var text = $(e.target).text();
  pageSession.set("selectedCategory",text);
 },
  "click .cityselection": function(e, t){
 var text = $(e.target).text();
  pageSession.set("selectedCity",text);
 }
 });