Javascript 如何使用复选框从knockout.js中的另一个数组中筛选嵌套的ko.observearray

我尝试从另一个带有复选框的数组中筛选列表，但失败。基本上，我有一个作业数组，每个作业包含一个位置数组。我有选项的复选框，并创建了一个ChosenLocation数组

以上所有工作都正常，但我无法实现所需的筛选列表。筛选列表正在显示，与hiringManagerJobs完全相同，但筛选不起作用

我已经在下面发布了我的代码。问题出现在viewModel.filteredJobs函数中

淘汰赛

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

---

]，

self.filteredJobs=ko.observearray（）是多余的，也不要使用

viewModel.filteredJobs

而是直接在模型中计算

注意：

self.LocationFacets（）

这是一个可观察的。您将其设置为

viewModel.LocationFacets

self.filteredJobs = ko.computed(function () {
    var chosenLocations = ko.utils.arrayFilter(self.LocationFacets(), function (p) {
        return p.selected();
    });
    var jobs = self.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;
             })
        })
    }
})

请注意，您声明

filteredJobs

正在工作，只是当您选择位置方面时，它不会触发

filteredJobs

。所选的

可观察对象正在更新，但这不会触发
过滤器eJobs
发生变异，只有对
位置facets
或
hiringManagerJobs
的更改才会更新此内容

如果希望数组在选择方面时发生变化，则需要：

 self.selected.subscribe(function (newValue) {
     if (viewModel != null)
          viewModel.LocationFacets.valueHasMutated();
 });

主要问题是，您没有以结构化的方式引用数据。您已经获得了
chosenLocations
的本地定义，该定义似乎是从程序的上一次迭代中遗留下来的。您正在查看
job.Locations
，但
Locations
位于
job.Document
内

我使用了
arrayFirst
作为
Array.find的一个模拟，它更像是过滤器内部的过滤器，而不是附加的过滤器


var Search=function（）{
var self=这个；
self.hiringManagerJobs=ko.observearray（）；
self.hiringManagerFilterSearchTerm=ko.observable（）；
self.hiringManagerFilterId='xjifu9fdasjkf985ed4'；
self.locationsAcets=ko.obbservablearray（）；
self.chosenLocations=ko.observearray（）；
self.filteredJobs=ko.observearray（）；
//self.filteredJobs=ko.observearray（）；
searchByHiringManager=函数（）{
自雇经理([{
“分数”：1，
“高光”：空，
“文件”：{
“id”：“1b41ce24-280d-4fe7-8488-D4BAD522BC9”，
“JobTitle”：“Test HiringManagerFilterId”，
“公司名称”：“测试公司”，
“ExtUrl”：https://.....",
“地点”：[
“伦敦”，
“曼彻斯特”，
“纽约”
],
“工作总结”：“诸如此类”，
“OgLogo”：空，
“招聘经理过滤ID”：“xjifu9fdasjkf985ed4”
}
},
{
“分数”：1，
“高光”：空，
“文件”：{
“id”：“853880b3-fbae-4271-8034-7868c4de63a8”，
“职位名称”：“软件开发高级经理”，
“公司名称”：“测试公司”，
“ExtUrl”：“https:…”，
“地点”：[
“伦敦”，
“格拉斯哥”，
“爱丁堡”
],
“工作总结”：“诸如此类”，
“OgLogo”：空，
“招聘经理过滤ID”：“xjifu9fdasjkf985ed4”
}
}
]);
自我定位面([{
“类型”：0，
“From”：空，
“To”：空，
“价值”：“爱丁堡”，
“计数”：1
},
{
“类型”：0，
“From”：空，
“To”：空，
“价值”：“格拉斯哥”，
“计数”：1
},
{
“类型”：0，
“From”：空，
“To”：空，
“价值”：“伦敦”，
“计数”：1
}
]);
}
searchByHiringManager（）；
}
var viewModel=新搜索（）；
viewModel.filteredJobs=ko.computed（函数（）{
const chosenLocations=viewModel.chosenLocations（）；
const jobs=viewModel.hiringManagerJobs（）；
if（chosenLocations.length==0）//如果未选择，则返回所有
返回工作岗位；
else{//other wise仅返回所选作业
const result=ko.utils.arrayFilter（作业，函数（作业）{
return ko.utils.arrayFirst（job.Document.Locations，函数（location）{
返回ko.utils.arrayFirst（选择位置，函数（cl）{
返回cl.值===位置；
});
});
});
返回结果；
}
})
应用绑定（视图模型）





我试图将您的问题一五一十地重现出来，但似乎data.Facets.Locations中缺少一些数据。也许你可以看一看并填写缺失的数据。如果没有它，将很难帮助您。我已经根据您发布的代码在问题中添加了位置方面。看起来filteredJobs正在尝试根据
p.selected（）进行筛选
，但我看不到在任何地方设置
p.selected
，因此这将始终返回一个空数组，然后返回函数returning all jobs”//if none selected return all“filteredJobs正在该foreach:filteredJobs显示所有作业。过滤不起作用，这就是问题所在。所选位置正在视图模型中加载，但作业列表没有相应地进行过滤。我相信问题可能出在filteredjobs函数中else语句的逻辑中。非常感谢。非常感谢。
self.filteredJobs = ko.computed(function () {
    var chosenLocations = ko.utils.arrayFilter(self.LocationFacets(), function (p) {
        return p.selected();
    });
    var jobs = self.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;
             })
        })
    }
})

 self.selected.subscribe(function (newValue) {
     if (viewModel != null)
          viewModel.LocationFacets.valueHasMutated();
 });