使用Knockout为下拉选择框绑定Change事件遇阻求助

兄弟，你踩的这个坑其实是没搞清楚Knockout的绑定上下文和原生事件的作用域差异～直接用原生onchange会找不到你viewModel里的actionWhenChange函数，因为原生事件的回调是在全局window作用域执行的，而你的函数是定义在viewModel内部的，自然会报ReferenceError。

给你两种最贴合Knockout思路的解决方案：

方案1：用Knockout的event绑定直接绑定变更事件 #

直接在data-bind里添加event绑定，让Knockout帮你处理上下文，这样就能正确调用viewModel里的函数：

<select class="picker-select" 
        data-bind="options: searchOptions, 
                   select:{}, 
                   optionsText: 'name', 
                   optionsValue: 'id', 
                   value: selectedSearchOption,
                   event: { change: actionWhenChange }" ></select>

对应的viewModel里的函数可以正常接收事件对象：

function YourViewModel() {
    // 其他已有的可观察对象和逻辑...
    this.selectedSearchOption = ko.observable();
    this.searchOptions = ko.observableArray([/* 你的选项数据 */]);

    this.actionWhenChange = function(event) {
        console.log("doing stuff", event);
        // 这里还可以通过this.selectedSearchOption()拿到当前选中的值
        console.log("当前选中ID：", this.selectedSearchOption());
    };
}

ko.applyBindings(new YourViewModel());

方案2：订阅选中值的变化（更推荐的Knockout响应式写法） #

既然你已经用value绑定了selectedSearchOption这个可观察对象，直接订阅它的变化会更符合Knockout的响应式设计，不需要额外绑定事件：

function YourViewModel() {
    this.selectedSearchOption = ko.observable();
    this.searchOptions = ko.observableArray([/* 你的选项数据 */]);

    // 订阅选中值的变化
    this.selectedSearchOption.subscribe(function(newSelectedId) {
        if (newSelectedId !== undefined) { // 可选：排除初始未选中的情况
            console.log("doing stuff，选中的ID是：", newSelectedId);
            // 这里写你要执行的逻辑
        }
    });
}

ko.applyBindings(new YourViewModel());

这种写法不需要修改HTML标签，完全在viewModel里处理状态变化，更符合MVVM的思想。

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