Javascript-Objekte mit HTML-Objekten verbinden

Adi | tmine

Adi | tmine

Erfahrenes Mitglied
Hi Leute

Ich hätte da mal eine Frage, bei der ich irgendwie nicht wirklich Rat weiss.

In Javascript lassen sich ja Objekte (Klassen) erstellen.
Ich habe im Netz bisher leider nur Klassen Beispiele gefunden, welche nur Daten im Javascript verarbeiten und per Alert ausgeben.
Welche Lösungsansätze gibt es nun um diese Javascript-Objekte mit den erzeugten HTML-Objekten zu verbinden.

Beim erzeugen des HMTL-Objekts kann ich ja die Referenzen irgendwie nicht wirklich mitgeben. Oder etwa doch?


Einzige Variante, welche ich mir vorstellen könnte ist:

Eine Funktion zu schreiben, welche mir anhand einer in einem Attribut des HTML-Objekt gespeicherten ID das zugehörige Javascript-Objekt aus einem Array aller Javascript-Objekte sucht.

Dies wäre meiner Meinung nach aber etwas umständlich. Gibt es noch andere Lösungen?
Irgendwie muss das doch komfortabel gehen. Es gibt ja immer mehr Webseiten, welche in Javascript codiert sind.

Wäre für Hilfe sehr dankbar.
 
Moin,

ich könnte dir da eine ganze Menge recht prominenter Beispiele nennen, wohl alle JS-Frameworks dürften dies tun.

Hier mal nen Beispiel:

Code: 
<body></body>
<script type="text/javascript">
<!--
window.onload=function()
{
  obj1={'element' :document.createElement('b'),
        'fx1'     :function()
                   {
                    window.status='1:Knoten erzeugt';
                   },
        'fx2'     :function()
                   {
                    obj3.element.parentNode.removeChild(obj3.element);
                    window.status='4:aus Body entfernt';
                   }
      };
  obj2={'fx'      :function(e)
                  {
                    e.appendChild(document.createTextNode('Wanderknoten'));
                    window.status='2:Text eingefügt';
                  }
       };
  obj3={'fx'      :function(o)
                  {
                    this.element=document.getElementsByTagName('body')[0].appendChild(o.element);
                    window.status='3.In Body eingehangen';
                  }
       }
  
  obj1.fx1();
  setTimeout(function(){obj2.fx(obj1.element);},3000);
  setTimeout(function(){obj3.fx(obj1);}        ,6000);
  setTimeout(function(){obj1.fx2();}           ,9000);
  
  
}
//-->
</script>

Hier wird ein neues Element erstellt , du kannst solche Referenzen aber ebensogut mit allen anderen Methoden/Eigenschaften erzeugen, die einen Zeiger auf ein Element erzeugen, bspw:

document.getElementById()
document.getElementsByTagName()[n]
document.getElementsByName()[n]
node.childNodes[n]
formularelement.form
Event.target
node.nextSibling
node.cloneNode()
uswusf.

oder per this in einer Handler-Funktion eines Events.

Vielleicht meinst du aber auch etwas ganz anderes :-(
 
Hi , Danke für die Antwort =)

Nur soweit war ich auch schon XD.
Nur habe ich dann einige Probleme, wenn ich z.B. dem im Js-Objekt enthaltenen HTML-Objekt einen OnClick Event hinzufüge. Z.B. wie muss ich vorgehen, wenn ich bei der Zuweisung eine Methode des JS-Objekts übergeben möchte? und zwar mit Parametern

Code: 
element.setAttribute("onClick", this.myOnClickEvent(param1, param2));
Dies würde ja dann die Methode schon bei der Zuweisung ausführen...

Code: 
element.setAttribute("onClick", this.myOnClickEvent);
Dies würde zwar die Referenz der Methode übergeben, nicht aber die Parameter...

Code: 
element.setAttribute("onClick", "this.myOnClickEvent(param1, param2)");
Und bei dieser Variante würde das this nicht mehr auf der Js- sondern auf das HTML-Objekt Referenzieren...

Ist soweit richtig oder? Wie kann ich denn nun diese THIS-Problematik umgehen?

Während der Generierung der Seite ist der Zugriff auf die Js-Objekte kein Problem nur aber wie kann ich aus schon gezeichneten HTML-Elementen auf User Eingaben usw. eingehen? Wie komm ich aus einem HTML-Element wieder auf das Js-Objekt?

Ich kann mir zwar das HTML-Objekt in das Js-Objekt speichern, nicht aber umgekehrt.. oder?

Ich hoffe man versteht was ich meine ^^..


Ps: Ich bin leider noch nicht so fix mit den Referenzierungen usw. in Js ... =(
 
oke genau das hat mich eben gestört und ich dachte, dass es ev. irgendeine Möglichkeit gibt, die Speicherung aller Objekte in Variablen zu umgehen.

Nja habe mir Gestern beim herum experimentieren eine kleine Klasse geschrieben, in welcher die Js-Objekte registriert und per Id wieder abgefragt werden können. Somit kann ich jedem erstellten HTML Objekt einfach diese Id in sein id Attribut schreiben, und das zugehörige Js-Objekt wieder finden.

Finde ich etwas umständlich, aber wenn es keine Andere Möglichkeit gibt =( ...

Hier die Klasse, falls jemand auch so etwas sucht oder ev. hat jemand eine Bessere Möglichkeit, Verbesserungsvorschläge o.ä... :-(
Code: 
/* JsObject Klasse 
 * - Von dieser Klasse müssen alle Objekte erben, wenn sie im JsObjectController 
 *   registriert werden sollen.
 */
function JsObject(){
	// Variablen deklaration
	var id = 0;
	// End Variablen deklaration
	
	// Konstruktor 
	// End Konstruktor
	
	/* Getter und Setter Methoden*/
	this.getId = function(){
		return this.id;
	}
	this.setId = function(in_id){
		this.id = in_id;
	}
	/* End Getter und Setter Methoden*/
}

/* JsObjectController Klasse
 * - Diese Klasse verwaltet alle Javascript Objekte.
 * - Mit Hilfe dieser Klasse können Js-Objekte, welche im HTML Code mit ihrer ID referenziert sind
 *   gefunden und verwendet werden.
 */
function JsObjectController(){
	// Variablen deklaration
	var objects = new Array();
	
	//Konstruktor
	//END Konstruktor
	
	// Add a new Object
	this.registerNewObject = function(temp_object){
		objects.push(temp_object);
	}
	
	// get All registred Objects
	this.getAllObjects = function(){
		return this.objects;
	}
	
	// get the last Id
	this.getLastId = function(){
		return objects.length-1;
	}
	
	// Get an Object by his ID
	this.getObjectById = function(temp_id){
		for(i=0; i<objects.length;i++){
			if(objects[i].getId() == temp_id){
				return objects[i];
			}
		}
		return null;
	}
}

Dazu gehört natürlich dann eine HTML Objekt Klasse, welche ein HTML-Element repräsentiert. Diese Klasse muss dann einfach von der Klasse JsObject erben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück