2015-10-15 85 views
0

我是骨幹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國家功能將類似於以上。 現在我的問題是,這三個函數單獨工作正常。但我無法合併這三個功能來縮小結果。 當用戶過濾美國和澳大利亞的國家類型的公司和多邊的時候,只有來自美國和澳大利亞的公司類型和公司類型的組織應該顯示。再次,在這些結果中,如果用戶在組織名稱輸入字段中鍵入'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); 
    }); 
}); 

請幫我這個。由於

回答

0

我可能沒有理解你的問題非常好,但你可以簡單地做這樣的事情:

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

可以重構,這只是給你一個想法

+1

謝謝..鏈接實際上確實解決了這個問題。有一件事,但下劃線的過濾方法不適合我。它顯示模型未在控制檯中定義。我不得不使用this.filter()而不是_.filter() – jimmypage