我是骨幹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);
});
});
請幫我這個。由於
謝謝..鏈接實際上確實解決了這個問題。有一件事,但下劃線的過濾方法不適合我。它顯示模型未在控制檯中定義。我不得不使用this.filter()而不是_.filter() – jimmypage