Question

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

第一个下拉列表正确填充数据，但是，在第一个下拉列表中选择项目时，将引发以下错误：

未捕获的TypeError：无法读取属性'childOptions'为null

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

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

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

我是在正确的轨道上还是有人知道为什么会这样？

敲除

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;
};

staticBuildData

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];
}

Answer 1

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

然而，计算出的togaLevel将评估何时：

首次实例化
selectedLevel更改
togaMakers更改

这意味着当selectedLevel为true且togaMakers仍为空时，您将收到错误消息。 computed值将进行评估，它会尝试在空数组中找到第一个值（返回null），然后尝试获取null.childOptions。

快速解决方法是将return语句更改为：

return type ? type.childOptions : null;

这使得计算出的句柄为空数组，方法是返回null。

ObservableArray中的第一个数组项

1 个答案: