根据 meteor 中的 select 下拉框过滤 collection

Filter collection based on select dropdown box in meteor

我正在尝试根据 select 下拉列表中的 select 值过滤我的 collection。我已经尝试了 and here 的解决方案,但它对我来说效果不佳。下面是我想要 filter.the select 下拉列表在另一个模板 categoryFilter 中的模板,我在这里使用 {{> categoryFilter}} 调用它来过滤 collection 下的列表{{#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() 软件包 filtering.Am 我一直在做吗?我如何过滤值并在 <ul> 列表中调用它们并过滤 <li> values.Please 帮助我

因为您一次只存储一个值(所选类别),所以在这种情况下没有必要使用 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);
 }
 });

如果您仍想对 ccategorycity 等多个过滤器值使用 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);
 }
 });