无法在Bootstrap确认框onCancel方法中访问Knockout可观察数组

你的核心问题是回调函数中this指向不符合预期，导致无法访问ViewModel类中的parameters可观察数组，以下是几种可靠的解决方案：

方案1：缓存ViewModel实例引用（兼容所有场景） #

在构造函数中先将this缓存为一个变量（比如self），后续在回调中直接使用这个变量访问可观察数组，彻底避免this指向问题：

export class ViewModel {
    
    public parameters: KnockoutObservableArray<Parameter>

    constructor() {
        const self = this; // 缓存当前ViewModel实例
        this.parameters = ko.observableArray(new Array<Parameter>());

        $('div.panel-footer button[data-toggle=confirmation]').confirmation({
            placement: 'top',
            href: '#',
            title: 'Add Parameter',
            btnOkLabel: 'Save & Resend Email',
            btnOkIcon: 'glyphicon glyphicon-envelope',
            btnOkClass: 'btn btn-sm btn-primary',
            btnCancelLabel: 'Save',
            btnCancelIcon: '',
            btnCancelClass: 'btn btn-sm btn-primary',
            onCancel: function(e, target) {
                // 通过缓存的self访问可观察数组
                const params = self.parameters();
                // 这里可以继续处理params，比如添加新参数等
            }
        });
    }
}

方案2：使用bind显式绑定this #

通过Function.prototype.bind方法，将回调函数的this永久绑定到当前ViewModel实例：

export class ViewModel {
    
    public parameters: KnockoutObservableArray<Parameter>

    constructor() {
        this.parameters = ko.observableArray(new Array<Parameter>());

        $('div.panel-footer button[data-toggle=confirmation]').confirmation({
            placement: 'top',
            href: '#',
            title: 'Add Parameter',
            btnOkLabel: 'Save & Resend Email',
            btnOkIcon: 'glyphicon glyphicon-envelope',
            btnOkClass: 'btn btn-sm btn-primary',
            btnCancelLabel: 'Save',
            btnCancelIcon: '',
            btnCancelClass: 'btn btn-sm btn-primary',
            onCancel: function(e, target) {
                this.parameters(); // 此时this指向ViewModel实例
            }.bind(this) // 显式绑定this
        });
    }
}

方案3：排查箭头函数失效原因（你的原有写法理论上可行） #

你最初使用的箭头函数onCancel: (e, target) => { this.parameters(); }，理论上应该能捕获构造函数中的this（ViewModel实例）。如果该写法失效，可能是以下原因：

• 使用了旧版本的Bootstrap Confirmation插件，其内部逻辑会强制修改回调的this指向
• 构造函数外的代码错误修改了ViewModel实例的this指向

可以尝试升级插件版本，或检查其他代码是否存在意外的this绑定操作。

内容的提问来源于stack exchange，提问作者Seçin Çelik