2

コンテキストを「this」に設定しているにもかかわらず、意図したメソッドをトリガーできません。createNewTable 関数内の次のコードでは、「this.joinTable(data.tableId);」コンテキストをこれに設定しても起動できません。

この問題をどのように解決するか。助けてください。

var homePageKeycontroller = {

    currentIndex:0,
    tables: new Array("newGame"),

    init: function(){
        this.select();
    },

    select : function(){
        $(".box").css({
            background:"#FFAB25"
        });
        $("#"+this.tables[this.currentIndex]).css({
            background:"gray"
        });
    },
    next : function(){
        this.currentIndex++;
        if(this.currentIndex > this.tables.length-1)
            this.currentIndex = 0;
        this.select();
    },
    previous : function(){
        this.currentIndex--;
        if(this.currentIndex <= 0)
            this.currentIndex = 0;
        this.select();
    },
    createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    alert("Table ID: "+data.tableId);
                    this.joinTable(data.tableId); // issue here
                }
            }
        });
    },
    handleUserChoice : function(){
        if(this.tables[this.currentIndex] ==='newGame'){
            this.createNewTable();
        }
    },
    joinTable : function(_tId){
        $.ajax({
            url:"http://mywebsite.com/JoinTable",
            type:'post',
            dataType:'json',
            data:{tableId:_tId},
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    this.showTable(); //issue here
                }
            }
        });
    },
    showTable : function(){
        $.ajax({
            url : 'http://mywebsite.com/showTable',
            success:function(data){
                DOM.mainCanvas.html(data);
            }
        });
    }
}
4

3 に答える 3

2

jQuery APIのドキュメントによると

すべてのコールバック内のthis参照は、設定で$.ajaxに渡されるコンテキストオプションのオブジェクトです。コンテキストが指定されていない場合、これは Ajax 設定自体への参照です。

したがって、これを機能させるには、ajax 呼び出しの前にこれへの参照を変数に格納するか、コールバック内で直接 homePageKeyController.joinTable() を呼び出します。

createNewTable : function(){
    var self = this;
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                // Use self variable here since "this" belongs to callback
                // function context.
                // or call homePageKeyController.joinTable(data.tableId) instead.
                self.joinTable(data.tableId);
            }
        }
    });
},
于 2013-04-25T16:20:53.907 に答える
1

ここでの問題は、'success' メソッド内で、'this' キーワードが 'success' メソッドを含む ajax オブジェクトを参照していることです。

これを修正する簡単な回避策は次のとおりです。

var homePageKeycontroller = {

  var that = this;

  createNewTable : function(){
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                alert("Table ID: "+data.tableId);
                that.joinTable(data.tableId);
            }
        }
    });
},

joinTable : function(_tId){
    $.ajax({
        url:"http://mywebsite.com/JoinTable",
        type:'post',
        dataType:'json',
        data:{tableId:_tId},
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                that.showTable();
            }
        }
    });
},
showTable : function(){
    $.ajax({
        url : 'http://mywebsite.com/showTable',
        success:function(data){
            DOM.mainCanvas.html(data);
        }
    });
}

}

于 2013-04-25T16:21:32.993 に答える
0

おそらく、:success の代わりに .done() 構文を試してみてください。私は成功のアプローチでこの種の問題を抱えていましたが、done() アプローチを使用するときは決してありませんでした。

createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this
        }).done(function(data){
            if(data.status == JsonStatus.OK) {
                alert("Table ID: "+data.tableId);
                this.joinTable(data.tableId); // issue here
            }
        });
    },
于 2013-04-25T16:37:45.527 に答える