DOM Objekt mit Klasse Verknüpfen

[nimble]

Hi

Ich den euch hangen meine JS Fragen langsam zu den Ohren raus... nun ich hab schon fast alles hingekriegt was ich für mein Ajyxprojekt brauche - darum danke erstmal!

Ich erstelle ein Select-Menu mit der Klasse Cselector. Mit dem Befehl getOptions wird dann das eigentliche Menu erzeugt und mit Daten aus ner XML Datei gefüllt. Das funktioniert alles prima.

  
user = new Cselector('p_user', connector)  
user.getOptions('user.xml');  

zum Schluss der getOptions Methode wird dem Select-Menu eine Funktion angehängt: field.onchange = this.updateOptions; Dieser aufruf führt die Funktion auch richtig aus, was ich überprüft habe.

  
this.updateOptions = function()  
{  
   aktoption = fieldplace.firstChild.getAttribute('value');  
   alert(fieldplace.firstChild.innerHTML);  
   fieldplace.removeChild(fieldplace.firstChild);  
   this.getOptions('user.xml');  
}  

Hier wird das Selekt-Menu gelöscht und mit neuen Parametern wieder neu erstellt. Der Syntaxchecket ist zwar der meinung, dass das this. vor dem getOptions so stimmen muss, der IE aber kennt die Option nicht, weil er warscheinlich mit this. das <select> Objekt meint.
Aber ohne this. weiss er garnicht wohin mit der funktion.

Wie bring ich das nun dem Internet Explorer bei?

PS: parameterübergabe über die Funktion mit var bla = this möchte ich vermeiden - es gibt doch bestimmt eine saubere lösung dazu.

THX

[molily]

Hallo,

PS: parameterübergabe über die Funktion mit var bla = this möchte ich vermeiden - es gibt doch bestimmt eine saubere lösung dazu.

Deine Frage ist identisch mit der, die du in https://forum.selfhtml.org/?t=134586&m=873078 gestellt hast. Die Lösung, die dir da gegeben wurde, ist m.M.n. bereits die sauberste Lösung.

function Cselector () {  
   var thisObj = this;  
   ...  
   this.updateOptions = function (eventobjekt) {  
      alert(this); // zeigt auf der Elementobjekt, bei dem der Handler registriert wurde  
      alert(thisObj); // Zeigt immer auf die Cselector-Instanz  
   };  
   ...  
   field.onchange = this.updateOptions;  
}

Die Technik dahinter sind wie gesagt Closures. Um die kommst du nur durch eine Möglichkeit herum: Du speicherst eine Referenz auf die Cselector-Instanz am select-Elementobjekt. Im Handler kannst du dann über this auf diese Referenz zugreifen und bekommst die Cselector-Instanz:

function Cselector () {  
   this.updateOptions = function (eventobjekt) {  
      alert(this.correspondingCselector);  
      this.correspondingCselector.getOptions('user.xml'); // usw.  
   };  
   ...  
   field.correspondingCselector = this;  
   field.onchange = this.updateOptions;  
}

Eine dritte Möglichkeit gibt es meines Wissens nicht.

Mathias