Backbone 使用多个属性过滤集合

Question

我是主干 js 的新手。我正在尝试创建一个显示某些数据并允许用户使用某些属性过滤它们并缩小结果范围的应用程序。我获取的数据包含三个字段：组织名称、组织类型和国家/地区。用户可以通过从下拉列表中选择组织类型和国家/地区来应用过滤器。组织类型和国家可以是多个。我使用 jQuery 的 select2 来允许用户选择多个组织类型和国家。 输入字段上的每次击键都会过滤组织名称。我设法创建了一个过滤器，它分别根据所有三个属性过滤记录。这是我的收藏以及我的过滤功能：

var OrganisationCollection = Backbone.PageableCollection.extend({
  model: Organisation,
  state: {pageSize: 20},
  mode: "client",
  queryParams: {
    currentPage: "current_page",
    pageSize: "page_size"
  },

  filterBy: function(organisationName, organisationType, countryName){
    var matchingModels;
    var filterFunction = function(model) {
      var check = (model.get('name').indexOf(organisationName)>-1);
      return check;
    }
    collectionToFilter = this;
    matchingModels = filteredCollection(collectionToFilter, filterFunction);

    function filteredCollection(original, filterFn) {
      var filtered;
      // Instantiate new collection
      filtered = new original.constructor();
      // Remove events associated with original
      filtered._callbacks = {};
      filtered.filterItems = function(filter) {
        var items;
        items = original.filter(filter);
        filtered._currentFilter = filterFn;
        return filtered.reset(items);
      };
      // Refilter when original collection is modified
      original.on('reset change destroy', function() {
        return filtered.filterItems(filtered._currentFilter);
      });
      return filtered.filterItems(filterFn);
    };
    collectionToFilter = new OrganisationCollection(matchingModels);
    return collectionToFilter;
  }
});

现在，此过滤功能仅根据组织名称过滤集合。如果我要根据组织类型过滤我的集合，我的 filterBy 函数将是：

filterBy: function(organisationName, organisationType, countryName){
  var matchingModels;
  var filterFunction = function(model) {
    var check = typeof organisationType=='string' ?  (model.get('type').indexOf(organisationType)>-1) : (_.indexOf(organisationType, model.get('type')) > -1);
    return check;
  }
  collectionToFilter = this;
  matchingModels = filteredCollection(collectionToFilter, filterFunction); // filterFunction would be same as above
  collectionToFilter = new OrganisationCollection(matchingModels);
  return collectionToFilter;
}

我的 filterBy country 功能与上面类似。 现在我的问题是这三个功能分别工作正常。但我无法合并这三个函数来缩小结果范围。 即，当用户使用美国和澳大利亚国家/地区、公司和多边类型进行过滤时，只有那些来自美国和澳大利亚的国家/地区具有公司和多边类型的组织才应该显示。同样，在这些结果中，如果用户在组织名称输入字段中键入“A”，则应该只显示以前结果中以字母“A”开头的那些组织。我不知道如何实现。 这是我触发过滤器的函数：

$(document).ready(function(){
  var country = $("#filter-country").val();
  var countryName = country ? country : '';
  var type = $("#filter-org-type").val();
  var orgType = type ? type : '';
  var orgName = '';

  $("#filter").on('input',function(e){
    var orgFilter = $('#filter').val();
    orgName = orgFilter ? orgFilter : '';
    orgCollection.trigger("filter-by-organisation",orgName, orgType, countryName);
  });
// Users can select countries from select field #filter-country and types from select field #filter-org-type and click on button #apply-filters to trigger filter function
  $(document).on('click', '#apply-filters', function(){
    orgCollection.trigger("filter-by-organisation",orgName, orgType, countryName);
  });
});

请帮我解决这个问题。谢谢

Answer 1

我可能不太了解你的问题，但你可以简单地做这样的事情：

var OrganisationCollection = Backbone.PageableCollection.extend({
  model: Organisation,
  filterBy: function(organisationName, organisationType, countryName) {
    var organisationNameResults = this.filter(function(model) {
      // your logic for filtering based on organisationName
    });
    var organisationTypenResults = _.filter(organisationNameResults, function(model) {
      // your logic for filtering based on organisationType
    });
    var countryNameResults = _.filter(organisationTypenResults, function(model) {
      // your logic for filtering based on countryName
    });
    this.reset(countryNameResults);
  }
});

可以重构，这只是给你一个想法