MVC Konzept in Javascript

[Xervos]

Hallo Leute,

ich möchte gerade ein MVC Pattern in Javascrtipt umsetzten stehe aber im moment ein bisschen an.

Ich habe zb. ein HTML-Element das ich mit einem Click Event versehen will.

CapacityBar = function(row, col, max, parent) {

	this.rowNr 				= row;
	this.colNr 				= col;
	this.namedId			= 'CapacityBar_R' + row + '_C' + col;  
	this.maxCapacity 		= max;
	this.currentCapacity	= 0;
	this.parent				= parent;
	
	var adding = '<div id="' + this.namedId + '" class="container-overlay"><div class="container-inner">' + 
	             '<div class="anzeige-container"><p class="anzeige">0%</p></div><div class="balken-container">' + 
				 '<div class="balken"></div></div></div></div>';
	
	$(parent).append(adding);
}

CapacityBar.prototype.setCapacity = function(value) {
	this.currentCapacity = value;
}

CapacityBar.prototype.getSelector = function() {
	return '#' + this.namedId;
}

CapacityBar.prototype.hilight = function(doIt) {

	if(doIt)
		PIE.attach(this);
	else
		PIE.detach(this);
}

CapacityBar.prototype.yell = function() {
	alert(this.namedId);
}

das ist meine Klasse die ich so anlege

var test = new CapacityBar(1,1,500, $('#CapacityRow_R1'));
var test2 = new CapacityBar(1,2,500, $('#CapacityRow_R1'));

Jetzt möchte ich wenn eines der beiden DIVs geklickt wird die Funktion yell des JSObjects aufgerufen wird nur weiß ich nicht wie

 

[Paul_]

Hi Xervos,

nur Dom Elemente können angeklickt werden, du musst also das onclick event deines frisch erzeugten Divs überschreiben.
Allerdings kommst du nicht ohne weiteres an das entsprechende Objekt ran, da ja erstmal keine Beziehung zwischen dem Div und dem Objekt, in dem es erzeugt wurde, besteht.

Um das Problem zu lösen, kannst du im Konstruktor des Objekts das Objekt selbst an das Div Element hängen. Anschließend kannst du entsprechend über das Dom Element darauf zugreifen und die yell Methode aufrufen.

Das Ganze sieht dann etwa so aus:

[...]
$(parent).append(adding);
				
document.getElementById(this.namedId).object = this;
document.getElementById(this.namedId).onclick = function(){
	this.object.yell();
}
[...]

Noch ein Satz zum Wording:
Es gibt keine Klassen in JavaScript, nur Objekte, die du als Prototypen für neue Objekte verwenden kannst

Ciao,
Paul