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 ^_^
Entrata archiviata sotto: JavaScript. Tags: .
Trackback this post | Iscriviti ai commenti via RSS Feed