1
チェックボックスを使用して別の配列からリストをフィルタリングしようとしていますが、失敗しています。基本的に私は、各仕事の場所の配列をinlcudeジョブの配列を持っています。オプションのチェックボックスがあり、selectedLocationsの配列が作成されています。knockout.js内の別の配列から入れ子になったko.observableArrayをチェックボックスでフィルタリングする方法
上記のすべてが動作していますが、私が必要とするフィルタリングされたリストを達成できません。フィルタリングされたリストは表示されており、hiringManagerJobsとまったく同じですが、フィルタリングが機能していません。
以下に私のコードを掲載しました。問題は、viewModel.filteredJobs関数にあります。
KnockoutJsノックアウトビューモデルでJSON配列が
"chosenLocations": [
{
"Type": 0,
"From": null,
"To": null,
"Value": "London",
"Count": 1
},
{
"Type": 0,
"From": null,
"To": null,
"Value": "Glasgow",
"Count": 1
}
],
"hiringManagerJobs": [
{
"Score": 1,
"Highlights": null,
"Document": {
"id": "1b41ce24-280d-4fe7-8488-d4babd522bc9",
"JobTitle": "Test HiringManagerFilterId",
"CompanyName": "Test Company",
"ExtUrl": "https://.....",
"Locations": [
"London",
"Manchester",
"New York"
],
"JobSummary": "blah blah blah",
"OgLogo": null,
"HiringManagerFilterId": "xjifu9fdasjkf985ed4"
}
},
{
"Score": 1,
"Highlights": null,
"Document": {
"id": "853880b3-fbae-4271-8034-7868c4de63a8",
"JobTitle": "Senior Manager - Software Development",
"CompanyName": "Test Company",
"ExtUrl": "https:......",
"Locations": [
"London",
"Glasgow",
"Edinburgh"
],
"JobSummary": "blah blah blah ",
"OgLogo": null,
"HiringManagerFilterId": "xjifu9fdasjkf985ed4"
}
}
],
"LocationsFacets": [
{
"Type": 0,
"From": null,
"To": null,
"Value": "Edinburgh",
"Count": 1
},
{
"Type": 0,
"From": null,
"To": null,
"Value": "Glasgow",
"Count": 1
},
{
"Type": 0,
"From": null,
"To": null,
"Value": "London",
"Count": 1
}
]の下のようなものです
var Search = function(){
var self = this;
self.hiringManagerJobs = ko.observableArray();
self.hiringManagerFilterSearchTerm = ko.observable();
self.hiringManagerFilterId = document.getElementById('hiringManagerId').value
self.LocationsFacets = ko.observableArray();
self.chosenLocations = ko.observableArray();
self.filteredJobs = ko.observableArray();
//self.filteredJobs = ko.observableArray();
searchByHiringManager = function() {
$.get('/...
}).done(function (data) {
self.hiringManagerJobs(data.Results);
self.LocationsFacets(data.Facets.Locations);
})
}
searchByHiringManager();
}
var viewModel = new Search();
viewModel.filteredJobs = ko.computed(function() {
var chosenLocations = ko.utils.arrayFilter(viewModel.LocationFacets,
function (p) {
return p.selected();
});
var jobs = viewModel.hiringManagerJobs();
if (chosenLocations.length == 0) //if none selected return all
return jobs;
else { //other wise only return selected jobs
return ko.utils.arrayFilter(jobs, function(job){
return ko.utils.arrayFilter(job.Locations, function(location){
return ko.utils.arrayFilter(chosenLocations,
function(chosenLocation) {
return location == chosenLocation.Value;
}).length > 0;
})
})
}
})
ko.applyBindings(viewModel);
HTML
<!-- ko foreach: LocationsFacets -->
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenLocations" />
<span data-bind="text: Value"></span>
<!-- /ko -->
<ul class="list-group" data-bind="foreach: filteredJobs">
<li class="list-group-item" data-bind="with: Document">
<p class="job-title media-heading" data-bind="text: JobTitle"></p>
</li>
</ul>
、
私はバイオリンで、あなたの問題を再現しようとしているが、一部のデータがdata.Facets.Locationsのために不足しているようです。たぶんあなたは一見して欠けているデータを埋めることができます。それがなければ、あなたを助けるのは難しいでしょう。 – Nisarg
質問に位置ファセットを追加しました –
投稿したコードに基づいて、filteredJobsが 'p.selected（）;'に基づいてフィルタリングしようとしていますが、 'p。これは常に空の配列を返し、すべてのジョブを返す関数が続きます。 "//選択されていない場合はすべて返されます" –