javascript - ObservableArray 中的第一个数组项

Question

我正在尝试使用 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];
}

Answer 1

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

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

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

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

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

return type ? type.childOptions : null;

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