我对 Knockoutjs 比较陌生，并尝试实现一些高级过滤。我正在寻找使用一系列复选框使用多个类别过滤我的视图模型数据。
我遵循了许多允许一次基于一个标准/类别进行过滤的解决方案。但是，我一直无法让高级过滤工作。当我根据嵌套数组中的值进行过滤时会出现问题。例如教育.课程。如果所选课程对应于在其教育数组中只有一门课程的对象，则似乎可以正常工作。但是，当取消/选择与其教育数组中具有多个课程的对象匹配的课程时，vm“中断”/停止工作并控制台记录“未捕获的类型错误：无法调用未定义的方法‘课程’”。无法解决该错误。
我在这个fiddle中设置了一些示例数据/和我当前版本的视图模型。另请参阅下面的当前视图模型。
将不胜感激任何帮助。
谢谢。
function vm(data) {
var vm = this;
vm.people = ko.observableArray();
ko.mapping.fromJS(data, {}, vm.people);
vm.selectedCourses = ko.observableArray();
vm.selectedSchools = ko.observableArray();
vm.selectedLocations = ko.observableArray();
vm.filtered = ko.computed(function () {
var result;
var self = this;
result = $.grep(self.people(), function (person, i) {
var remove = false;
if (self.selectedLocations().length > 0) {
if (person {
remove = remove || self.selectedLocations().indexOf(person.statename()) === -1
} else {
remove = true
}
}
if (self.selectedCourses().length > 0 || self.selectedSchools().length>0) {
if (person) {
var edResult;
var m1, mCourse, mSchool;
var position = 0;
var mCoursep = [];
var mSchoolp = [];
edResult = $.grep(person.education(), function (education, i) {
if (education) {
mCourse = self.selectedCourses().indexOf(education.course());
mSchool = self.selectedSchools().indexOf(education.name());
if (mCourse > -1) {
m1 = true;
mCoursep[position] = i;
}
if (mSchool > -1) {
m1 = true;
mSchoolp[position]=i;
}
position++;
}
return m1 === true
});
if (edResult.length > 0) {
for (i = 0; i < mCoursep.length; i++) {
remove = remove || self.selectedCourses().indexOf(person.education()[mCoursep[i]].course()) === -1;
}
for(i=0;i<mSchoolp.length;i++){ remove=remove||self.selectedSchools().indexOf(person.education()[mSchoolp[i]].name())===-1;
}
} else {
remove = true
}
}
}
return !remove
});
return result
}, vm);
};
vm.uniqueFilters = ko.computed(function () {
var uniqueCourses = ["Arabic Studies", "Chinese", "English and International Studies", "European and Nigerian Languages", "French", "History and Diplomacy Studies", "International Relations and Strategic Studies", "Kiswahili", "Language and Linguistics", "Languages Arts & Yoruba", "Management Technology", "Medical Laboratory and Technology", "Modern European Languages", "Russian with French/German"];
var uniqueSchools = ["ABTI", "Abia State University Uturu", "Abubakar Tafawa Balewa University Bauchi", "Achievers University Owo Ondo State", "Ambrose Alli University Ekpoma", "Babcock University Ilishan-Remo", "Bells University of Technology Ota", "Bingham University New Karu", "Delta State University Abraka", "Federal University of Technology Akure", "Modibbo Adama University of Technology Yola", "Rivers State University of Science and Technology Port Harcourt"];
var uniqueLocations = ["Abia", "Bauchi", "Cross River", "Delta", "Lagos", "Plateau", "Rivers"]
return {
uniqueCourses: uniqueCourses.sort(),
uniqueSchools: uniqueSchools.sort(),
uniqueLocations: uniqueLocations.sort()
};
});
var sampleData = [{
"firstname": "Ngozi",
"lastname": "Osadebe",
"statename": "Abia",
"ratename": "Declined",
"education": [{
"course": "French",
"name": "Delta State University Abraka",
"awards": "BSc.",
"gpa": "3.2"
}, {
"course": "History and Diplomacy Studies",
"name": "Ambrose Alli University Ekpoma",
"awards": "MSc.",
"gpa": "3.1",
"statename": "Abia"
}]
}, {
"firstname": "Chinedu",
"lastname": "Okorie",
"statename": "Lagos",
"ratename": "Not Rated",
"education": [{
"course": "European and Nigerian Languages",
"name": "Modibbo Adama University of Technology Yola",
"awards": "MSc.",
"gpa": "3.2"
}, {
"course": "Kiswahili",
"name": "Ambrose Alli University Ekpoma",
"awards": "BSc.",
"gpa": "4.6"
}]
}, {
"firstname": "Joachim",
"lastname": "Okeke",
"statename": "Lagos",
"ratename": "Not Rated",
"education": [{
"course": "Languages Arts & Yoruba",
"name": "Federal University of Technology Akure",
"awards": "BSc.",
"gpa": "2.8"
}]
}, {
"firstname": "Chantelle",
"lastname": "Tom",
"statename": "Plateau",
"ratename": "Not Rated",
"education": [{
"course": "Russian with French\/German",
"name": "Bingham University New Karu",
"awards": "MSc.",
"gpa": "3.4"
}, {
"course": "International Relations and Strategic Studies",
"name": "Bells University of Technology Ota",
"awards": "BSc.",
"gpa": "4.4"
}]
}, {
"firstname": "Simisola",
"lastname": "Lawson",
"statename": "Abia",
"ratename": "Not Rated",
"education": [{
"course": "Language and Linguistics",
"name": "Abia State University Uturu",
"awards": "BSc.",
"gpa": "3.1"
}]
}, {
"firstname": "Chuba",
"lastname": "Okadigbo",
"statename": "Bauchi",
"ratename": "Not Rated",
"education": [{
"course": "Chinese",
"name": "Abubakar Tafawa Balewa University Bauchi",
"awards": "BSc.",
"gpa": "4.2"
}, {
"course": "English and International Studies",
"name": "Achievers University Owo Ondo State",
"awards": "MSc.",
"gpa": "3.3"
}]
}]
var initialData = JSON.parse(sampleData);
ko.applyBindings(new vm(initialData));