0

私は自分自身にもっと良いJS開発の実践を教えようとしているので、JavaScriptオブジェクトラッパーで最新のVLEウィジェットを書いています。

var TutorGroupPoints = {
    URL: 'http://staff.curriculum.local/frog/rewards.php',
    CurrentUser: UWA.Environment.user.id,
    Groups: { },
    Sorted: [ ],

    init: function() {
        /* retrieve all of the groups from Frog and store them in a variable */
        Frog.API.get('groups.getAll',
        {
            'onSuccess': function (data) { this.Groups = data; },
            'onError': function(err) { alert(err); }
        });         
    },

    yearClick: function(year) {
        alert( this.Groups );

        for (var i = 0; i < this.Groups.length; i++) {

            if (this.Groups[i].name.indexOf(year) == 0 && this.Groups[i].name.indexOf('/Tp') != -1) {
                var arrayToPush = { 'id': this.Groups[i].id, 'name': this.Groups[i].name };
                this.Sorted.push(arrayToPush);
            }
        }
    }

};

widget.onLoad = function(){
    TutorGroupPoints.init();

    $('#nav li a').click(function() {
        TutorGroupPoints.yearClick($(this).attr("id"));
    });
}

このFrog.API呼び出しは、VLE（仮想学習環境）から学生/スタッフに関する情報を取得します。

私がやろうとしているのはdata、他の関数で使用するために、この情報（という変数で取得）をクラススコープ変数に格納することです。

Groups早い段階で変数を宣言してからを使用してそれを行ったと思いましたが、関数data = this.Groupsを実行すると、アラートがオブジェクトのロードとして表示されるだけです。yearClickthis.Groups[object Object]data[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]

に変更Groupsする[ ]と、アラートは完全に空になります。

そういうわけで、これはスコープの問題だと思います。data呼び出しからFrog.API他の関数​​で使用できる変数に格納するにはどうすればよいですか？以前は関数を使用していまし'onSuccess': function (data) { someOtherFunction(data); },たが、それは非常にクリーンで実用的な方法ではないと思いますか？

前もって感謝します、

4

2 に答える 2

1

Frogthisコールバック内の変数が間違っています。代わりにこれを使用してください：

init: function() {
    var self = this;  // reference for use inside closures
    /* retrieve all of the groups from Frog and store them in a variable */
    Frog.API.get('groups.getAll',
    {
        'onSuccess': function (data) { self.Groups = data; },
        'onError': function(err) { alert(err); }
    });         
}

関数が呼び出されるたびに、コンテキスト (つまりthis) が提供されます。コールバック内では、this値はおそらくグローバルwindowオブジェクトです。キャッシュされた変数を使用するとthis、クロージャ内で元の (外側の) 変数にアクセスできるようになります。

于 2012-08-14T10:16:04.067 に答える
1

これはよくある間違いです。関数である成功コールバックは、thisコードが実行されるコンテキストを変更します。したがって、コールバックでは、オブジェクトthisを指しなくなります。TutorGroupPoints

関数の外部への参照をキャッシュするかthis...

init: function() {
    var that = this; // <-- caching outer this
    Frog.API.get('groups.getAll', {
        'onSuccess': function (data) { that.Groups = data; },
        'onError': function(err) { alert(err); }
    });         
}

または、クロージャーを介して渡されたコピーをバインドします。この場合は、すぐに実行される関数です

init: function() {
    Frog.API.get('groups.getAll', {
        'onSuccess': (function(that) {
             return function (data) { that.Groups = data; }
        })(this), // <-- passing reference to outer this
        'onError': function(err) { alert(err); }
    });         
}
于 2012-08-14T10:16:21.683 に答える