Knockout级联数据绑定失效问题求助

需求是选中第一个下拉框时加载第二个下拉框的数据，第一个下拉框正常加载，但第二个下拉框无数据，控制台无报错，仅alert能正常触发。

原HTML代码 #

<select data-bind="
 options: $root.availableTutorials,
 value: $root.selectedTutorial,
 optionsCaption: 'Choose tutuorial...',
 event:{ change: $parent.onFirstChange }">
</select>

<select data-bind="
 options: $root.availableTutorials2,
 value: $root.selectedTutorial2,
 optionsCaption: 'Choose tutuorial2...'">
</select>

原JS代码 #

viewModel.selectedTutorial = ko.observable();
viewModel.selectedTutorial2 = ko.observable();

viewModel.availableTutorials = ko.observableArray([
    'Academic', 'Big Data',
    'Databases', 'Java Technologies',
    'Mainframe', 'Management',
    'Microsoft Technologies', 'Mobile Development',
    'Programming', 'Software Quality'
]);

viewModel.onFirstChange = function () {

    alert('first changed');

    viewModel.availableTutorials2 = ko.observableArray([
        'Academic', 'Big Data',
        'Databases', 'Java Technologies',
        'Mainframe', 'Management',
        'Microsoft Technologies', 'Mobile Development',
        'Programming', 'Software Quality'
    ]);

}

问题原因 #

Knockout的绑定依赖于预先声明的可观察对象。你在onFirstChange里直接给viewModel.availableTutorials2重新赋值了一个新的可观察数组，这会导致原来的绑定关系失效——页面上的第二个下拉框绑定的是最初未定义的availableTutorials2，而非你后来新建的这个。

解决方案 #

1. 提前初始化availableTutorials2为可观察数组（初始可以是空数组）
2. 在onFirstChange里修改这个可观察数组的内容，而不是重新赋值

修正后的JS代码：

viewModel.selectedTutorial = ko.observable();
viewModel.selectedTutorial2 = ko.observable();

viewModel.availableTutorials = ko.observableArray([
    'Academic', 'Big Data',
    'Databases', 'Java Technologies',
    'Mainframe', 'Management',
    'Microsoft Technologies', 'Mobile Development',
    'Programming', 'Software Quality'
]);

// 提前初始化可观察数组，初始为空
viewModel.availableTutorials2 = ko.observableArray([]);

viewModel.onFirstChange = function () {
    alert('first changed');
    
    // 直接修改已有可观察数组的内容，而非重新赋值
    viewModel.availableTutorials2([
        'Academic', 'Big Data',
        'Databases', 'Java Technologies',
        'Mainframe', 'Management',
        'Microsoft Technologies', 'Mobile Development',
        'Programming', 'Software Quality'
    ]);
}

这样修改后，第二个下拉框的绑定关系会一直指向同一个可观察数组，当数组内容更新时，Knockout会自动触发UI更新，加载新的选项。

内容的提问来源于stack exchange，提问作者chamara