'mouseover': this.toggleTime.bind(this)

Fix:

'mouseover': this.callOne.bind(this)

sehr schöne Serie, die mich mal wieder dazu animiert hat, etwas mehr mit mootools zu schaffen. Das Klassenkonzept hatte ich mir bisher nie richtig angesehen. Sehr schön erklärt das Ganze.

An dieser Stelle lege ich mal ein kleines Snippet ab, da ich keinerlei vernünftige Lösung bei der großen Suchmaschiene dafür gefunden hatte. Ich denke, darüber wird aber jeder stolpern, der das erste mal mit Klassen in mootools rumobert.

Problem war folgendes: Eine Klasse bauen, darin Elemente ins DOM einfügen. Diese Element sollten natürlich gleich events mitbekommen, damit ich damit mit ihnen irgendwas anstellen kann. Nun aber die Crux, ich möchte per ‘this’ die Methode innerhalb der Klasse auffrufen. Dort brauche ich aber wieder irgendwie eine Referenz auf das Element, damit ich beispielsweise die ID auslesen kann. Lösung: Statt this, die event-Eigenschaft auslesen. Simpel, wenn man weiß wie’s geht ;)

var ReferToClass = new Class({
	init: function() {
		for (var i = 0; i < 3; i++) {
			var elItem = new Element('div', {
				'id':i,
				'class':'time',
				'text':list[i]['duration'],
				'events': {
					'mouseover': this.toggleTime.bind(this) // need bind here, to cause the 'this'-keyword to refer to the class, otherwise 'this' would refer to the element itself
				}
			});
			elItem.inject($('myElement'), 'top');
		}
	},

	callOne: function(e) {
		console.log('given element id with this-key: ' + this.id); // undefined
		console.log('given element id via event-key: ' + e.target.id); // 1, 2, 3…

		console.log('second call (from this class): ' + this.callTwo());
	},

	callTwo: function() {
		return 'result second call';
	},
});

var foo = new ReferToClass();
foo.init();

Erscheint mir als ne gute Lösung, kann aber auch sein, dass das geschulte Auge draufschaut und mir das um die Ohren haut ;) Was sagst Du, ist der Ansatz richtig?

Der Ansatz des „Alles ist ein Objekt“ hat mir schon bei Ruby gefallen, es kann gut sein, dass ich in nächster Zeit verstärkt Mootools zum Einsatz kommen lassen werde. Freue mich auf jeden Fall schon auf Teil 5.

ich hab diese objecte noch immer nicht verstanden

Meinst du generell OOP?