JavaScript ES6+Jquery : How do I do to call a method of the class from within a success callback function of an ajax request?

Question

我正在使用新标准 ES6 制作一个网格，使用能够扩展 future 功能的类和 jquery 方法 $.ajax。一切都很顺利，直到我开始出现范围问题。我想从 ajax 调用中调用该类的方法。我怎么做？。我尝试使用 this.method() , method() ....但没有运气...我也尝试在构造函数方法中绑定(bind)该方法...

this.generateGridHeader=this.generateGridHeader.bind(this);

也没有任何运气......

这是代码，问题出在成功回调函数中的buildGrid()方法中，对generateGridHeader()和generateGridBody()的调用......它们没有被识别......我意识到它没有找到它们，因为 this 不是正确的范围，但我不知道如何从那里引用类方法......

网格类{

constructor(gridOptions) {
 this.grid_header='';
 this.grid_body='';
 this.grid='';   
 this.options=gridOptions;
 this.cacheDom();
 //this.bindEvents();
 this.buildGrid();
 //I need to bind them cause I'm going to use them inside a callback function
 //this.generateGridHeader=this.generateGridHeader.bind(this);
 //this.generateGridBody=this.generateGridBody.bind(this);
}

cacheDom() {
   this.$greeder = $(this.options.selector);
} 

bindEvents() {

}

buildGrid(){

 if(this.options.parameters !== undefined){
    //it's an ajax call
 $.ajax({
        method: "POST",
        url: this.options.data,
        data: $.param(this.options.parameters),
        success: function(data) {

            this.generateGridHeader();

             this.generateGridBody(data);

            // generateGrid(data, options); 
           // styleGrid(options);  //it can be default with bootstrap if the property style is undefined, if the user wants to put his own style he can use style:'custom' parameter
           // generatePager(options);
           // renderGrid(options);

        }
    });

 }else{
    //it's fixed data from an array or object
    //if typeof == Array parse array
    //if typeof == Object parse object
 }

}

  generateGridHeader(){

    var fields=this.options.fields;
    var header;

    header='<thead><tr>';

     $.each(fields, function(i, item) {
        header+='<th>'+fields[i].title+'</th>';
      });

     header+='</tr></thead>';
     alert(header);

    this.header=header;
}

generateGridBody(data){

} 

styleGrid(){

}    

renderGrid() {

}

}

/* dataType: 'array', 'json'possible values, if parameters is not defined it's array mode*/
var grid= new Grid({
    title:'The grid',
    selector:'#grid',
    data:'./api/getCustomers.php',
    parameters: {"id_customer":"32"},
    fields:{
        id_customer:{
         title:'ID customer'
        },
        first_name:{
         title:'First Name' 
        },
        last_name:{
         title:'Last Name'  
        }       
    }   
});

Answer 1

将 context: this 添加到您的 $.ajax() 设置中。此(上下文)对象将成为此后所有 Ajax 相关回调的上下文。

$.ajax({
    method: "POST",
    url: this.options.data,
    context: this,
    ...

现在，在调用 this.generateGridHeader(); 和 this.generateGridBody 时，在 success() 回调函数 this 中(data); 将按预期工作，因为它包含正确的对象(上下文)。

参见jQuery.ajax()#context了解更多详情。