pass Argument zu matchmedia addListener Callback-Funktion

Question

Ich bin ein Plugin zu bauen und für das Umschalten bestimmter Verhalten ein/aus, verwende ich die MatchMedia-Funktionen. In der Callback-Funktion muss ich jedoch ein Argument übergeben, um den richtigen Verweis darauf zu behalten. Wenn ich jedoch versuche, ein Argument an meine Callback-Funktion zu übergeben, heißt das, dass meine Callback-Funktion addListener nicht definiert ist. Das gleiche gilt, wenn ich versuche, dies an die Callback-Funktion zu binden.

TypeError: this.mediaQueryCheck(...) is undefined 

Es muss etwas wirklich klar sein, ich addListener bin fehle, so jetzt bin ich nur ein nicht-funktionales Beispiel meines Codes einschließlich:

 MyPlugin.prototype = { 
     version : '0.0.1', 
     mediaQuery : window.matchMedia(defaults.breakpoint), 

     mediaQueryCheck : function(mql){ 

      if(mql.matches === true){ // if our mediaQuery matches 
       this.evalScrollPosition(); 
       if(this.isLaunched === false){ 
        // attach scroll handlers 

        $(window).on('scroll resize', this.evalScrollPosition.bind(this)); 
        this.isLaunched = true; 
       } 
      } 
      else if(mql.matches === false){ // if the mediaQuery isn't active atm 
       if(this.isLaunched === true){ 
       // remove handlers 
       $(window).off('scroll resize', this.evalScrollPosition.bind(this)); 
        this.isLaunched = false; 
       } 
       this.fixedStatus = ''; 
       this.unstyleContainer(); // remove positioning set by plugin 
       this.unstyleColumns(); // remove positioning set by plugin 
      } 

     }, 

     init: function(){ 

      // merge user options with defaults 
      this.config = $.extend({}, defaults, this.options, this.metadata); 
      // define mql object 

      this.mediaQuery = window.matchMedia(this.config.breakpoint); 

      var thatMediaQuery = this.mediaQuery; 
      // add listener to conditionally toggle scroll and resize listeners and bind this to not lose reference to this when running the mediaQueryCheck function 

      this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery).bind(this)); 

      // check mediaQuery to determine whether to apply eventListeners 

      // and run for a first time 
      this.mediaQueryCheck(thatMediaQuery); 


      return this; 
     }, 
/* .. rest omitted for brevity */ 
} 

So habe ich auch versucht, den Verweis auf diese auf meine mediaQueryCheck Funktion vorbei einen zweiten Parameter für diese Funktion hinzugefügt und dann in diesem wie so vorbei:

mediaQueryCheck : function(mql, context){ 
    // '..' 
}, 
init: function(){ 
    // 'rest omitted for brevity' 
    this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery, this)); 
}, 

aber ohne Erfolg .. irgendwelche Ideen? Danke im Voraus!

Answer 1

Zunächst einmal - der zweite Code, den Sie zur Verfügung gestellt haben, ist kein gültiger Weg, dies zu binden. Um dies zu binden, müssen Sie entweder eine Funktion verwenden (wie Sie es im ersten Codeabschnitt getan haben) oder etwas ähnliches selbst bereitstellen.

Quick Fix, ersetzen:

this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery).bind(this)); 

mit

this.mediaQuery.addListener(this.mediaQueryCheck.bind(this)); 

Sie brauchen nicht die Funktion aufzurufen, wenn Sie versuchen, "dies" zu binden. Wenn es nicht funktioniert, bitte fügen Sie mehr von Ihrem Code (die ganze Funktion wäre super).