Javascript-Callbacks innerhalb eines Objekts

Question

Ich schreibe eine Javascript-App, die ein HTML-Dokument über AJAX erhält, und es dann verarbeiten muss, um Ereignis-Listener (insbesondere Bootstrap-Popovers) an die darin enthaltenen Elemente anzuhängen. Ich habe Schwierigkeiten, die Zuhörer anzuhängen, und ich glaube, es ist ein Problem mit dem Umfang. Hier ist der relevante Code:

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); }}); 

... 

Das Problem (glaube ich) ist der func() Anruf in this.load. Wenn ich es this.process() übergebe, dann scopes das 'this' zum Fenster, und es gibt einen Fehler. Wenn ich this.process übergebe, ist es ein Lambda, das erstellt wird, und es schlägt immer noch fehl. Wenn ich this.func() rufe, tritt das gleiche Problem auf.

Wie kann ich entweder a) den Bereich innerhalb des App-Objekts mit dem Rückruf behalten, oder b) dieses Chaos reorganisieren, um den Handler nach dem Laden aufzurufen?

Answer 1

Ich könnte mir vorstellen, Sie var that=this Scoping Trick auf alle Methoden verwenden möchten:

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

dies bezieht sich auf den Kontext, in dem es zur Zeit verwendet wird. Also, wenn Sie this.process tun, wird es auf das Fenster zielen. Wenn Sie App.load(data, App.process) tun, dann zielt es auf die Prozessfunktion innerhalb des App Objekts ab.

Answer 3

Etwas wie folgt aus:

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); 
    ...