javascript - 更好地过滤 meteor 中的表

Question

我有一个表，我试图通过某些字段和标签在 meteor 中添加过滤。现在，每一行都有一个名为“race”和“against”的字段。表格上方有两个选择元素(race-select 和 against-select)，您可以使用它们来过滤出您想要查看表格上的哪些结果，但代码是真的很笨重，如果我想为其他标签添加更多过滤，代码就会变得更困惑。

一些代码只是尝试处理 session 的初始值。

var racelist = ['zerg', 'terran', 'protoss'];

Template.buildsList.helpers({
  builds : function() {
    if (typeof(Session.get('race-select')) == 'undefined' || Session.get('race-select') == 'all races'){
      Session.set('race-select', racelist);
    }
    if (typeof(Session.get('against-select')) == 'undefined' || Session.get('against-select') == 'all races'){
      Session.set('against-select', racelist);
    }
    return Builds.find({race : {$in : Session.get("race-select")}, against : {$in : Session.get("against-select")}}, { sort: { createdAt: -1 } });
  }
});

Template.buildsList.events({
  "change #race-select" : function(e){
    Session.set('race-select', [$(e.target).val().toLowerCase()])
  },
  "change #against-select" : function(e) {
    Session.set('against-select', [$(e.target).val().toLowerCase()])
  }
})

有很多几乎重复的行，但我想知道是否有更好的方法来实现这种过滤功能。

Answer 1

过去几天我已经检查过的一个软件包刚刚添加了对自定义过滤器的支持。 https://atmospherejs.com/aslagle/reactive-table 。您可以将多个自定义过滤器绑定(bind)到一个表，并且使用起来更加简单。

代码最终看起来像这样:

Template.raceFilter.created = function() {
    this.filter = new ReactiveTable.Filter('race-filter', ['race']);
};

Template.raceFilter.events({
    "change" : function(event, template) {
        var input = $(event.target).val().toLowerCase();
        if(input != 'all races'){
            template.filter.set(input);
        }else {
            template.filter.set("");
        }
    }
});

raceFilter 模板可以是任何类型的输入(选择、文本框、单选)。