使用Knockout.js绑定<select>控件报错，求助问题排查与解决

核心报错原因 #

你遇到的ReferenceError是绑定上下文错误、视图模型缺少必要属性，以及未完成初始化这几个问题共同导致的：

1. foreach内部无法直接访问myArray #

<ul data-bind="foreach: ThisArray">会把内部绑定上下文切换到ThisArray的子项上，但你的视图模型里根本没定义ThisArray；就算定义了，子上下文里也不能直接用myArray——必须通过$parent.myArray或$root.myArray访问父级视图模型的属性。

2. 缺少degreeType可观察属性 #

select的value绑定指向degreeType，但你的视图模型里没有这个属性，Knockout找不到对应值就会报错。

3. 未激活视图模型 #

代码只定义了MyViewModel，但没调用ko.applyBindings完成Knockout绑定的初始化，这是最容易遗漏的关键步骤。

修正后的完整代码 #

JavaScript部分 #

var MyViewModel = function () {
    var self = this;
    // 补上foreach依赖的数据源（示例数据，可根据实际需求修改）
    self.ThisArray = ko.observableArray([{}, {}]);
    // 选项数组
    self.myArray = ko.observableArray([
        { text: 'First Item', value: '1' },
        { text: 'Second Item', value: '2' }
    ]);
    // 为每个select绑定独立的选中值
    self.ThisArray().forEach(function(item) {
        item.degreeType = ko.observable();
    });
};

// 初始化视图模型，激活Knockout绑定
ko.applyBindings(new MyViewModel());

CSHTML部分 #

<div style="flex-basis: 100%">
    <ul data-bind="foreach: ThisArray">
        <li>
            <!-- 用$parent访问父级的选项数组，value绑定到当前子项的degreeType -->
            <select data-bind="options: $parent.myArray, optionsText: 'text', optionsValue: 'value', optionsCaption: 'Select item', value: degreeType"></select>
        </li>
    </ul>
</div>

关键修正点总结 #

• 绑定上下文修正：在foreach内部，用$parent/$root访问父级视图模型的属性（比如$parent.myArray）。
• 补充必要属性：添加ThisArray作为foreach的数据源，同时为每个select绑定对应的degreeType可观察属性。
• 初始化绑定：调用ko.applyBindings(new MyViewModel())让Knockout生效。

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