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国家/地区功能与上述类似。现在我的问题是这三个功能分别工作正常。但我无法合并这三个函数来缩小结果范围。即当用户过滤美国和澳大利亚的国家/地区，企业和多边类型时，只有那些来自美国和澳大利亚的公司和多边类型的组织应该展示。而且，在这些结果中，如果用户键入＆＃39; A＆＃39;在组织名称输入字段中，只有那些以字母“A＆＃39;应该表明。我不知道如何实现它。这是我触发过滤器的功能：

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

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

Backbone使用多个属性过滤集合

1 个答案: