私はKnockoutjsに比較的慣れておらず、高度なフィルタリングを実装しようとしています。一連のチェックボックスを使用して、複数のカテゴリを使用してビューモデル データをフィルター処理しようとしています。
一度に1つの基準/カテゴリに基づいてフィルタリングできる多くのソリューションに従いました。ただし、高度なフィルタリングを機能させることができませんでした。ネストされた配列の値に基づいてフィルタリングしているときに問題が発生します。例: education.course. 選択されたコースが、その教育配列内にコースが 1 つしかないオブジェクトに対応する場合、問題なく動作するように見えます。ただし、教育配列内の複数のコースを持つオブジェクトに一致するコースを選択解除/選択すると、vm が「中断」/動作を停止し、コンソール ログに「Uncaught TypeError: 未定義のメソッド 'course' を呼び出せません」がログに記録されます。そのエラーを解決できませんでした。
私はいくつかのサンプルデータをセットアップしました/そしてこのフィドルで現在のバージョンのビューモデルをセットアップしました。現在のビューモデルの下も参照してください。
これに関する支援をいただければ幸いです。
ありがとう。
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));