Question

我们假设我有一个名为Cars的集合，持有大量文档。

我们说我有5 <input type="checkbox">，每个color对应Cars文档中的if键。

我想使用选择器查询集合，具体取决于选中的复选框。这个问题的最佳解决方案是什么？现在，我似乎正在编写很多{{1}}语句。还有更好的方法吗？

由于

Answer 1

您可以将所选（已选中）颜色集存储在Session变量中，并在返回Cars的帮助程序中使用该Session变量的值。下面给出完整的解决方案。将这两个文件保存在cars.html和cars.js的新项目中。

<body>
  {{> filter}}
  {{> carList}}
</body>

<template name="filter">
  {{#each colors}}
    <label>
      <input type="checkbox" value="{{.}}" {{checked}} /> {{.}}
    </label>
  {{/each}}
</template>

<template name="carList">
  <ul>
    {{#each cars}}
      <li>{{make}} {{color}}</li>
    {{/each}}
  </ul>
</template>

if (Meteor.isClient) {
  Cars = new Meteor.Collection(null);

  Meteor.startup(function () {
    Cars.remove({});
    Cars.insert({make: 'toyota', color: 'red'});
    Cars.insert({make: 'subaru', color: 'green'});
    Cars.insert({make: 'ford', color: 'brown'});
    Cars.insert({make: 'honda', color: 'white'});
    Cars.insert({make: 'datsun', color: 'yellow'});
    Cars.insert({make: 'doge', color: 'yellow'});
  });

  // return a unique list of colors from the Cars collection
  Template.filter.colors = function () {
    return _.uniq(Cars.find().map(function (car) { return car.color; }));
  };

  Session.setDefault('colors', []);

  // if any checkbox was clicked, map across all checked inputs, and
  // store resulting array of colors in session variable
  Template.filter.events({
    'click input[type=checkbox]': function (ev, tpl) {
      var colors = tpl.$('input:checked').map(function () {
        return $(this).val();
      });
      Session.set('colors', $.makeArray(colors));
    }
  });

  // attribute helper for checked colors
  Template.filter.checked = function () {
    if (_.contains(Session.get('colors'), this.toString())) {
      return {checked: true};
    }
  };

  // return all cars with that have a color in the session variable
  Template.carList.cars = function () {
    return Cars.find({color: {$in: Session.get('colors')}});
  };

}

使用Checkboxes过滤集合

1 个答案: