私はフィルタ付きアイテムのコレクションを持っています。フィルタは、いくつかのチェックボックスに基づいて適用されます。ユーザーが別の月を選択すると(項目が更新されると)アイテムのコレクションが変更されます。バックボーンjsフィルタ表示
私のアプローチは、各アイテムをループし、そのアイテムが一致するショーアイテムであればフィルタを適用することです。それ以外の場合は非表示にします。このアプローチは、現在の月に負荷中に機能しますが、別の月が選択されるとループが実行され、falseと評価される条件が実行された場合でも条件は実行されます。条件にブレークポイントを設定すると、コンソール内でその文が偽と評価されるため、条件が偽であることがわかります。 falseの場合でも、次のステップは条件に入ります。
ここにコードがあります。
render: function() {
display = this.model.get('display');
filters = this.model.get('filters');
//Check each class for filter parameters
items.forEach(function (cla) {
//reset all items
$("#" + cla.id).parent().removeClass('matches');
$("#" + cla.id).parent().removeClass('noMatches');
//Get all filters
var hasCredit = "credits";
var hasLocation = "location";
var hasStarttime = "starttime";
var hasAreaOfStudy = "areaOfStudy";
var hasSpecialty = "specialty";
var hasEventCode = "eventcode";
var hasFormat = "format";
var itemFilters = [];
if (filters.inputs.length == 0) {
$("#" + cla.id).parent().addClass('matches');
} else {
//Loop over each filter
filters.inputs.forEach(function (el) {
//Check credit filter
if (el.name == 'credits') {
if (cla.credits.trim() == el.value) {
itemFilters.push(hasCredit);
}
} else if (el.name == 'specialty') {
if (jQuery.inArray(el.value.trim(), cla.specialty) !== -1) {
itemFilters.push(hasSpecialty);
}
} else if (el.name == 'areaOfStudy') {
if (jQuery.inArray(el.value, cla.areaOfStudy) !== -1) {
itemFilters.push(hasAreaOfStudy);
}
} else if (el.name == 'starttime') {
if (cla.starttime.trim() == el.value) {
itemFilters.push(hasStarttime);
}
} else if (el.name == 'location') {
if (cla.location.trim() == el.value) {
itemFilters.push(hasLocation);
}
} else if (el.name == 'eventcode') {
if (cla.id.trim() == el.value.trim()) {
itemFilters.push(hasEventCode);
}
} else if (el.name == 'format') {
if (cla.format == el.value) {
itemFilters.push(hasFormat);
}
}
});
var isInputFilterMatch = applyInputFilter(filters.inputs, itemFilters);
//All non matching filters get a noMatch css classed applied to be hidden
if (isInputFilterMatch) {
$("#" + cla.id).parent().addClass('matches');
} else {
$("#" + cla.id).parent().addClass('noMatches');
}
}
});
//Hide and show all matches and non matches
$('.noMatches').hide();
$('.matches').show();
$('#main_main_MainContent_CpeCalendar').parent('.hidden-results').show();
// shifted over to apply this after the items are set
jQuery_1_4_2(".modal[href], .modal a[href]").colorbox();
return this;
}