javascript - JavaScript から TypeScript 関数にアクセスする

Question

jsTreeでTypeScriptを使いたいです。setCurrentNodeバインドされた jsTree 関数で関数を呼び出すにはどうすればよいですか?

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        $scope.vm = this;
        this.thescope = $scope;

        (<any>$("#demo2")).jstree({
             .bind("select_node.jstree", function (e, data) {
              // how can I call setCurrentNode(data) here?
             }
        });

    }


    setCurrentNode(node: any): any {
        ... // do Stuff in this typescript function
    }
}

score 1 · Accepted Answer

解決：

(<any>$("#demo2")).jstree({
         .bind("select_node.jstree", this.setCurrentNode.bind(this) )
         }

public setCurrentNode(e:any,data: any): any {
   ...
}

score 1 · Accepted Answer

Anzeo の提案によると、 $ を次のいずれかにキャストする必要がなくなります。始めるために必要なのは次のとおりです。

interface JQuery{
        jstree:Function;
}

score 0 · Accepted Answer

何が起こるかというと、内側の jsTree コールバックがインスタンスオブジェクトへの this 初期参照を上書きしています。

これを解決するには、2 つの安全な方法があります。

1- @Anzeo が指摘する矢印関数を使用することにより、これはお勧めしません。別のネストされたコールバックが必要な場合は、最も内側のイベントオブジェクトへの this 参照を使用できるため、使用しません。

2-インスタンスオブジェクトへの this 参照を次のようにキャッシュします。

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        // Caching the reference for using it in the inner callbacks.
        var self = this;

        $scope.vm = this;
        this.thescope = $scope;

        (<any>$("#demo2")).jstree({
             .bind("select_node.jstree", function (e, data) {

              // Call to the instance method here!
              self.setCurrentNode(/*Node params here*/);
             }
        });

    }


    setCurrentNode(node: any): any {
        ... // do Stuff in this typescript function
    }
}

2に固執することをお勧めします。これは、どのネストレベルでも機能し、ネストされた各コールバックで適切なイベントオブジェクトを指す this を持つことができるためです。

問題はここと同じであるため、その他の参照については、 Javascript 'this' overwriting in Z コンビネーターおよびその他すべての再帰関数を参照してください。

javascript - JavaScript から TypeScript 関数にアクセスする

4 に答える 4

Related

Reference