✔ this-Context bei Events

R

realpk

Mitglied
Hallo,
ich stehe gerade vor einem konzeptionellen Problem.

Wenn ich auf ein Event eines HTML-Elements reagiere, verlasse ich in dem Handler den this-Context.

Damit besser klar ist, was ich meine, vorerst ein Teil meines Codes:

Code: 
Controller_answers = function()
{
	this.options =
	{
		targetId : 'container_answers',
	};
		
	this._lastId = 0;
	
	this._getNew = function()
	{
		this._lastId++;
		return '<div class="container_answer" id="container_answer_' + this._lastId + 
			'"><input type="text"/><input type="button" value="Löschen" /></div>';
	};
	
	this.create = function()
	{
		$('#' + this.options.targetId).append(this._getNew());
		var id = '#container_answer_' + this._lastId;
		$(id).keypress(this._onKeyPress);
	};
	
	this._onKeyPress = function(e)
	{
		if(e.which === 13 && $('#container_answer_' + answers._lastId).value)
		{
			answers.create();
			$('#container_answer_' + answers._lastId).focus();
		}
	}
	this.create();
}

var answers = new Controller_answers();

Wie zu erkennen ist, muss ich bei "_onKeyPress" auf die Instanz "answers" zurückgreifen. Mir wäre es lieber an dieser Stelle auch einen "generischen" Bezugspunkt zu nutzen. this bezieht sich ja leider nicht mehr auf diesen Context. Wenn ich nun mehrere Instanzen habe, kann ich es so gar nicht mehr nutzen.

Hat jemand eine Idee?

Vielen Dank und Grüße
 
Ich persönlich baue meine Klassen anders auf. Aber du könntest einfach eine "private" Eigenschaft einführen, die auf this zeigt.

Javascript: 
Controller_answers = function()
{
    var _this = this;

    //Innerhalb aller Funktionen steht dir jetzt _this zu Verfügung
    //...
}


So baue ich persönlich Klassen auf. Dann hast du überall "self" zur Verfügung.

Javascript: 
function Class(v1, v2, v3 /*, v4, ...*/) {
	/*
		Private variables
	*/
	var p1, p2, p3;//...
	
	//The actual object (also kind of a private variable)
	var self = {};
	
	/*
		Private methods
	*/
	function pm1() {
		//...
	}
	
	function pm2() {
		//...
	}
	
	/*
		Public variables
	*/
	self.pv1 = 'foobar';//...
	
	/*
		Public methods
	*/
	self.m1 = function() {
		//Call private methods
		pm1();
		
		//Access private variable
		alert(p1);
	};
	
	self.m2 = function() {
		//...
	};
	
	
	return self;
}
 
CPoly hat gesagt.:
Ich persönlich baue meine Klassen anders auf. Aber du könntest einfach eine "private" Eigenschaft einführen, die auf this zeigt.

Javascript: 
Controller_answers = function()
{
    var _this = this;

    //Innerhalb aller Funktionen steht dir jetzt _this zu Verfügung
    //...
}
Zum Vergrößern anklicken....


Danke aber das funktioniert so leider nicht.

ReferenceError: _this is not defined

Ich kann zwar auf this und _this in den Funktionen zugreifen. Aber der Eventhandler wird in einem anderen Context aufgerufen. An dieser Stelle gibt es kein Scope wo _this definiert ist.
 
In deinem Code ist die "_onKeyPress" Funktion im gleichen Scope wie die Variablen. Wie hast du es denn eingebaut?
Da ich deine Klasse schlecht testen kann, hier mal ein schnelles Beispiel:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>OOP</title>
</head>

<body>
	<div id="foobar"></div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	function Class(id) {
		var obj = document.getElementById(id);
		var _this = this;
		
		this.bla = 'blub';
		
		this.html = function(str) {
			obj.innerHTML = str;
		}
		
		this.addClickHandler = function() {
			obj.onclick = this._onClick;
		}
		
                //Wäre auch schöner als private Methode. Niemand muss diese von außen aufrufen können
		this._onClick = function() {
			//Auch wenn this jetzt das div-element ist, kann ich sehr wohl auf die Variable _this zugreifen.
			_this.html('woooooot');
			alert(_this.bla);
		};
	}
	
	var c = new Class('foobar');
	c.addClickHandler();
	c.html('beer');
	/* ]]> */
	</script>
</body>

</html>
 
Oh danke es funktioniert doch. Firebug ist dabei selber etwas buggy. Es zeigt bei mir noch immer ReferenceError: _this is not defined an.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück