knockout.js - 传递给 KO 点击绑定(bind)的 Typescript 成员方法以 "wrong"范围结束

Question

我正在使用 KnockoutJS 和 Typescript 编写单页应用程序。

问题是这样的，我有一个 MainViewModel 方法:

public addToCase(email) {
    this.addToCaseVM.setEmail(email, this.getEmailBody());
};

我的页面中有一个电子邮件 View ，其中有一个绑定(bind)在 html 中的“添加到案例”按钮，如下所示:

<a class="btn btn-info" data-bind="click: $root.addToCase" data-toggle="modal" href="#addToCaseModal"><i class="icon-plus-sign"></i>&nbsp;Add To Existing Case</a>

$root 是我的 MainViewModel。单击此按钮时，函数的“电子邮件”参数是 MainViewModel 中正确选择的电子邮件，但函数的范围也是 EmailViewModel，而不是定义该函数的 MainViewModel。

我明白为什么会这样，我对如何解决 Typescript 中的特定问题很感兴趣，因为我无法像在纯 javascript 中那样声明指向 MainViewModel 实例的指针:

var MainViewModel = (function(){ 
    var self = this; 

    this.addToCase = function(email) {
        self.addToCaseVM.setEmail(email, self.getEmailBody());
    };
})();

Answer 1

我对此的解决方案是声明类方法并将其留空直到调用构造函数，然后定义方法主体。这样方法的范围就会正确。

class MainViewModel {

    addToCase: (email) => void;

    constructor() {
        this.addToCase = (email) => {
            this.addToCaseVM.setEmail(email, this.getEmailBody());
        };
    }
}