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>值。请帮助我

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);
 }
 });

如果您仍想对ReactiveDict和ccategory这样的多个过滤器值使用city，则可以使用：

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);
 }
 });

根据流星中的选择下拉框过滤收集

1 个答案: