Attivare il metodo di un’istanza in maniera anonima

22 ottobre 2009 at 09:48 Lascia un commento

Quante volte vi siete trovati a dover attivare da un click il metodo dell’istanza di una classe? La prima difficoltà che si incontra è individuare esattamente l’istanza che ci serve. La soluzione più frequente è passare il nome dell’istanza o un qualsiasi riferimento come parametro.

Ma non si può proprio fare a meno di passare il riferimento all’istanza? Ebbene sì, e Prototype ci propone l’uso di “bindAsEventListener()”.

Facciamo un esempio. Ci sono x campi di testo. Ad ognuno è associato un bottone. Cliccando su un bottone parte l’alert del valore del campo di testo corrispondente.

Ecco il codice di come si risolve il problema “alla vecchia maniera”:

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
	initialize:function(buttonField,textField,instance_id){
		this.buttonField=buttonField;
		this.textField=textField;
		this.instance_id=instance_id;

		this.buttonField.observe("click",
			function(){saluti[instance_id].hi()}
		);
	},
	hi:function(){
		alert(this.textField.value);
	}
});
// creo le istanze
var saluti=[];
document.observe("dom:loaded",function(){
	$$(".btn").each(function(BUTTON){
		var TEXTFIELD=$$(".msg")[saluti.length];
		saluti.push(new saluto(
			BUTTON,TEXTFIELD,saluti.length
		));
	});
});
</script></head><body>

<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>

</body></html>

A differenza dalla vecchia, la “nuova maniera” non ha bisogno di alcun riferimento, per cui si può addirittura eliminare l’array con le istanze!

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
	initialize:function(buttonField,textField){
		this.buttonField=buttonField;
		this.textField=textField;

		this.buttonField.observe("click",
			this.hi.bindAsEventListener(this)
		);
	},
	hi:function(){
		// in caso vogliate usare argomenti,
		// ricordate che il primo è sempre l'evento
		alert(this.textField.value);
	}
});
// creo le istanze
document.observe("dom:loaded",function(){
	$$(".btn").each(function(BUTTON,i){
		var TEXTFIELD=$$(".msg")[i];
		new saluto(
			BUTTON,TEXTFIELD
		);
	});
});
</script></head><body>

<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>

</body></html>

C’est très chic ^_^

Entry filed under: JavaScript. Tags: .

IE6 vs PNG, come cambiare lo sfondo grigio col colore di background preferito Stringhe ed entità

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Trackback this post  |  Subscribe to the comments via RSS Feed


Categorie

JavaScript String .replace

Archivi

Seguimi su Twitter


%d blogger cliccano Mi Piace per questo: