オブジェクト内のJavascriptコールバック

Question

AJAX経由でHTMLドキュメントを取得しているJavascriptアプリケーションを作成していて、その内部の要素にイベントリスナー（特にブートストラップポップオーバー）を添付して処理する必要があります。私はリスナーを付けるのが難しいです、そして、それは範囲の問題だと私は信じています。

var App = function(site){ 

    this.load = function(data, func){ 
    $('div.ajax').html(data); 
    func(); 
    } 

    this.dispatch = function(data){ 

    if(data.indexOf('from_server') !== -1){ 
     this.load(data, this.process); 
     console.log('Loaded view from Matisse.'); 
     return true; 
    } 

    } 

    this.process = function(){ 
    this.popovers('from_server'); 
    } 

    this.popovers = function(el){ 
    var that = this; 
    $('img.artwork.gallery', el).each(function(){ 
     $(this).popover({ trigger: 'hover', content: that.popoverPopulate(this) }); 
    }); 
    } 

    this.popoverPopulate = function(el){ 
    return $(el).next('div.popover_content').html(); 
    } 
} 

var APP = new App(); 

$.ajax({blah: blah, success: function(data){ APP.dispatch(data); }}); 

... 

問題は（私が思うに）this.loadでfunc()呼び出しです：ここに関連するコードです。 this.process()を渡すと、 'this'がウィンドウに表示され、エラーが発生します。 this.processに合格した場合、それは作成されたラムダであり、それでも失敗します。私がthis.func()と呼んだ場合、同じ問題が発生します。

コールバックを使用してAppオブジェクト内のスコープを保持するか、またはロード後にこの混乱を再構成してハンドラを呼び出しますか？

Answer 1

私はあなたがすべてのメソッドにvar that=thisスコープトリックを使用したい想像：

var App = function(site){ 

    var that = this; 

    this.load = function(data, func){ 
    $('div.ajax').html(data); 
    func(); 
    } 

    this.dispatch = function(data){ 

    if(data.indexOf('from_server') !== -1){ 
     that.load(data, that.process); 
     console.log('Loaded view from Matisse.'); 
     return true; 
    } 

    } 

    this.process = function(){ 
    that.popovers('from_server'); 
    } 

    this.popovers = function(el){ 
    $('img.artwork.gallery', el).each(function(){ 
     $(that).popover({ trigger: 'hover', content: that.popoverPopulate(this) }); 
    }); 
    } 

    this.popoverPopulate = function(el){ 
    return $(el).next('div.popover_content').html(); 
    } 
} 

Answer 2

これは、それが現時点で使用されるコンテキストを指します。だから、this.processを実行すると、ウィンドウがターゲットに設定されます。 App.load(data, App.process)を実行すると、Appオブジェクト内のプロセス関数を対象とします。このような

Answer 3

何か：

var App = function(site){ 
    var self = this; //-<!!! 

    this.load = function(data, func){ 

    ... 

    this.dispatch = function(data){ 
     if(data.indexOf('from_server') !== -1){ 
      self.load(data, self.process); 
    ...