gpt4 book ai didi

javascript - ObservableArray 中的第一个数组项

转载 作者:行者123 更新时间:2023-12-03 03:47:48 26 4
gpt4 key购买 nike

我正在尝试使用 knockoutJS 填充级联 select2 下拉列表。当使用静态数据时,代码似乎工作正常,如 function staticbuildData() 中所示。 ,但在使用函数 function buildData() 时抛出错误.

第一个下拉列表正确填充数据,但是,在第一个下拉列表中选择项目后,会引发以下错误:

Uncaught TypeError: Cannot read property 'childOptions' of null

事实证明,以下行无法找到子选项并返回 null:

 var make = ko.utils.arrayFirst(viewModel.togaMakers,function(item)

我唯一能想到的是staticbuildData()返回一个数组,而 buildData()返回一个 observableArray,因此找不到正确的子选项。

我走在正确的轨道上吗?或者有人知道为什么会发生这种情况吗?

knockout

var viewModel = {
togaMakers: buildData(),
// togaMakers: staticbuildData(),
selectedInstitution : ko.observable(),
selectedLevel : ko.observable(),
selectedFaculty : ko.observable()
};

viewModel.togaLevels = ko.computed(function(){
if(viewModel.selectedInstitution()){
console.log(buildData());
var make = ko.utils.arrayFirst(viewModel.togaMakers,function(item){
console.log(item.text,viewModel.selectedInstitution());
return item.text===viewModel.selectedInstitution();
});
return make.childOptions;
}
});

viewModel.togaFaculties = ko.computed(function(){
if(viewModel.selectedLevel()){
var type = ko.utils.arrayFirst(viewModel.togaLevels(),function(item){
console.log(item.text,viewModel.selectedLevel());
return item.text===viewModel.selectedLevel();
console.log("Answer:" + item);
});
return type.childOptions;
}
});
ko.cleanNode(viewModel);
ko.applyBindings(viewModel);
}

buildData()

function buildData() {
var dataContainer = ko.observableArray([]);

getData().then(function(newData) {
parsed = JSON.parse(newData);
processed = processData(parsed);
dataContainer(processed);
});

return dataContainer;
};

静态构建数据

function staticbuildData(){
var uomBachelor = new cascadingOption({
text: 'Bachelor Degree',
childOptions : [
new cascadingOption({
text: 'Faculty of Enviroment'
}),
new cascadingOption({
text: 'Faculty of Education'
})
]
});

var uomMaster = new cascadingOption({
text: 'Master Degree',
childOptions : [
new cascadingOption({
text: 'Faculty of Law'
}),
new cascadingOption({
text: 'Faculty of Dental & Surgery'
})
]
});

var uom = new cascadingOption({
text: 'University 1',
childOptions : [uomBachelor, uomMaster]
});

var mdx = new cascadingOption({
text: 'University 2',
childOptions : [
new cascadingOption({
text:'Bachelor Degree',
childOptions : [
{text: 'Q5'},
{text: 'Q7'}
]
}),
new cascadingOption({
text:'Master Degree',
childOptions : [
{text: 'A3'},
{text: 'A4'},
{text: 'A6'}
]
})
]
});
return [uom, mdx];
}

最佳答案

您正在使用异步数据。 buildData 函数将首先返回一个空的可观察数组,然后然后添加数据。

但是,计算出的 togaLevel 将在以下情况下进行评估:

  • 首次实例化
  • selectedLevel 更改
  • togaMakers 更改

这意味着当 selectedLevel 为 true 并且 togaMakers 仍为空时,您会收到错误。将评估计算的值,它将尝试在空数组中查找第一个(返回null),然后尝试获取null.childOptions.

一个快速修复方法是将 return 语句更改为:

return type ? type.childOptions : null;

这通过返回 null 使计算句柄为空数组。

关于javascript - ObservableArray 中的第一个数组项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45298435/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com