Question

在我的javascript文件中，我无法访问Ajax成功函数中的脚本级变量。请参阅以下代码：

MyApplication.Test = Class.extend({


    ...
    ...

    testElement : null,

    ...
    ...

    updateElementBackground : function(url)
    {
        if(url.length > 0) {
        var response =  $.ajax(url ,{
                     contentType : "application/json",

                     headers: {"Access-Control-Request-Headers": "X-requested-with"}, 
                     type : "GET",
                     success : function(data) {
                          this.testElement.css("backgroundImage","url('"+url+data+"')"); // testElement is undefined now. here this refers to the Ajax call
                     },
                     error : function(e) {
                         errorCallback(e);
                      }
                  });
                  }
                  else
                  {
                    this.testElement.css("backgroundImage","testImage.jpg"); // testElement is accessible here
                  }
    }
});

如何在Ajax成功函数中获得“testElement”？

Answer 1

当您尝试获取this.testElement时，您可以访问this success个testElement功能。并且没有this属性。

尝试在updateElementBackground范围内预定义updateElementBackground : function(url) { var that = this; var response = $.ajax(url ,{ success : function(data) { that.testElement.css("backgroundImage","url('"+url+data+"')"); }, }); }。

{{1}}

Answer 2

范围内的问题。尝试在这样的函数中创建一个var。

MyApplication.Test = Class.extend({


...
...

testElement : null,

...
...

updateElementBackground : function(url)
{   
    var testElement = this.testElement;
    if(url.length > 0) {
    var response =  $.ajax(url ,{
                 contentType : "application/json",

                 headers: {"Access-Control-Request-Headers": "X-requested-with"}, 
                 type : "GET",
                 success : function(data) {
                      testElement.css("backgroundImage","url('"+url+data+"')"); // testElement is undefined now. here this refers to the Ajax call
                 },
                 error : function(e) {
                     errorCallback(e);
                  }
              });
              }
              else
              {
                this.testElement.css("backgroundImage","testImage.jpg"); // testElement is accessible here
              }
}
});

Answer 3

有两种主要方法可以解决这个问题，第一种方法是将deadulya所涵盖的值存储在父函数范围的局部变量中。

另一个选择是代理成功函数，以确保它在您的类的上下文中运行。

success: $.proxy(function(data) {
    ...
}, this),

Answer 4

您必须将updateElementBackground的上下文设置为您的类实例。在Backbone中它会是这样的：

var View = Backbone.View.extend({
    testElement: $(...),

    initialize: function(parms){
        this.updateElementBackgroundCallback = _.bind(this.updateElementBackground , this);
    },

    events: {
        'click .something': 'updateElementBackgroundCallback'
    },

    updateElementBackground: function(){
        this.testElement.css(...);
    }
});

如何在Ajax成功函数中获取脚本级变量？

4 个答案: