6

KnockoutJSとTypescriptを使用してシングルページアプリケーションを作成しています。

問題はこれです、私はメソッドを持つMainViewModelを持っています：

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

私のページには、次のように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です。このボタンをクリックすると、関数の「email」パラメーターはMainViewModelで正しく選択された電子メールですが、関数のスコープもEmailViewModelであり、関数が定義されているMainViewModelではありません。

これが発生する理由を理解しています。純粋なJavaScriptの場合のように、MainViewModelインスタンスへのポインターを宣言できないため、Typescriptで特定の問題を解決する方法に興味があります。

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

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

4 に答える 4

7

これに対する私の解決策は、クラスメソッドを宣言し、コンストラクターが呼び出されるまで空のままにしてから、メソッド本体を定義することでした。このようにして、メソッドのスコープが正しくなります。

class MainViewModel {

    addToCase: (email) => void;

    constructor() {
        this.addToCase = (email) => {
            this.addToCaseVM.setEmail(email, this.getEmailBody());
        };
    }
}
于 2012-11-06T10:08:31.473 に答える
2

親オブジェクトをaddToCase関数に渡すことができるように関数リテラルを使用することもできますが、それは問題を解決するのではなく回避するように見えます。

data-bind="click: function(data) {$root.addToCase(data,$root)}"
于 2012-11-05T18:38:17.570 に答える
2

シングルトンの場合MainViewModelは、そのパターンを使用して静的参照を作成できます。

class MainViewModel {

    static self:MainViewModel;

    constructor() {
        self = this;
    } 

    addToCase = function(email) {
        MainViewModel.self.addToCaseVM.setEmail(email, MainViewModel.self.getEmailBody());
    }
}
于 2012-11-05T18:05:16.323 に答える
0

() =>字句スコープを保持するために使用できます。

() =>私はこれをデモンストレーションの目的で完全に機能する例にしましたが、それが魔法を実行するだけであることがわかります。

function setEmail(email: string, callback: Function) {
    callback();
}

class MainViewModel { 
    addToCase(email: string) {
        setEmail(email, () => {this.getEmailBody();});
    }

    getEmailBody() {
        alert('getEmailBody');
    }
}

var model = new MainViewModel();
model.addToCase('hello');
于 2012-11-05T18:59:17.867 に答える