[Jquery-Es] Objetos + jquery + ajax

Choan Gálvez choan.galvez en gmail.com
Sab Ago 4 03:31:02 PDT 2007


Hola.

On 04/08/2007, at 0:29, rey wrote:

> Hola Cohan,
>
> gracias por tu respuesta.
> Solamente por complicarte un poco más la vida y entender mejor el  
> funcionamiento de uso de un "closure", puedes ayudarme con este  
> ejemplo?, lo único que cambié fue poner el $.ajax en una función:
> ----------------------
>
> obj = function(){
>     this.id = "miId";
> }
>
> obj.prototype.send = function(){
>     var that  = this;
>         console.info( that.id); // retorna "miId"
>     ajax(that.callBack);
> }
> obj.prototype.callBack = function(){
>     console.info(this.id); // retorna "undefined" , Cómo lo  
> soluciono? GRACIAS!
> }
>
> function ajax(f){
>     $.ajax({
>         url:"index.html",
>         success: function(r) {
>             f(f);
>         }
>     });
> }
> var miObj = new obj;
> miObj.send();


Veamos... la gracia de una closure (cierre funcional) es que una  
función f2 declarada _dentro_ de una función f1 tiene acceso a las  
variables pertenecientes al scope (ámbito) de f1.

A ver si me explico un poco:

	// recibe una función como argumento y la ejecuta
	function runFunction(f) {
		f();
	}

	function f1() {

		var lalala = 'nonaino noná';

		function f2() {
			 // habemus acceso
			alert(lalala);
		}

		runFunction(f2);

	}

	f1(); // muestra el alert 'nonaino noná'



Ahora, si la definición de f2 queda fuera de f1 --este es el último  
cambio que has hecho--, no hay acceso que valga:

	function f1() {

		var lalala = 'nonaino noná';
		runFunction(f2);
	}

	function f2() {
		 // no tenemos acceso a las variables de f1
		alert(lalala);
	}


	f1(); // se rompe todo


En tu caso, tendrías que utilizar alguno de los métodos de `Function`  
que permiten ejecutar la función como método de un objeto (a saber,  
`call()` o `apply()`).

Ejemplillo:

	function runFunctionInContext(f, c) {
		f.call(c);
	}

	var unArgo = 'pertenezco al contexto global';

	var unObjeto = {
		unArgo : 'pertenezco al contexto de unObjeto'
	};

	function canta() {
		alert('nonaino noná ' + this.unArgo);
	}

	canta(); // nonaino noná pertenezco al contexto global
	canta.call(unObjeto); // nonaino noná pertenezco al contexto de  
unObjeto
	runFunctionInContext(canta, unObjeto); // nonaino noná pertenezco al  
contexto de unObjeto

Entonces... volviendo a tu caso...

	obj = function(){
	    this.id = "miId";
	}

	obj.prototype.send = function(){
	    ajax(this.callBack, this);
	}

	obj.prototype.callBack = function() {
		console.log(this);
	}

	function ajax(f, c){
	    $.ajax({
	        url:"/relatos",
	        success: function(r) {
	            f.call(c, r); // observa que paso el contexto como  
parámetro
	        }
	    });
	}
	var miObj = new obj;
	miObj.send();

No sé si habré aclarado algo o te habré liado más :-?

Un saludo.



>
> El día 3/08/07, Choan Gálvez <choan.galvez en gmail.com > escribió:Hola.
>
> On 03/08/2007, at 17:36, rey wrote:
>
> > Hola listeros,
> >
> > Llevo algún tiempo liando con este Script y la verdad no se cómo
> > solucionarlo:
> >
> > ////////////////
> >
> > obj = function(){
> >     this.id = "miId";
> > }
> >
> > obj.prototype.send = function(){
> >     alert(this.id); // retorna "miId"
> >     $.ajax({
> >         url:"../index.html",
> >         success: this.callBack
> >     });
> > }
> > obj.prototype.callBack = function(){
> >     alert(this.id); // retorna "undefined"
> >                        //Cómo puedo solucionar esto para que me
> > retorne el
> > valor de mi variable osea "miId"
> > }
> >
> > var miObj = new obj;
> > miObj.send();
> >
> > ////////////////
> >
> > Quiero que cuando termine se ejecute el evento del request AJAX me
> > tome el
> > valor de la variable "id" del objeto que envió la petición.
> >
> > Si alguno de ustedes puede darme una luz les quedaría agradecido.
>
> Pues por aquí tengo un mechero ;)
>
> Tal cual lo tienes, dentro del callback `this` apunta al objeto
> XMLHttpRequest. Para hacerlo como pretendes, tendrás que usar una
> closure:
>
> obj.prototype.send = function(){
>         var that = this;
>         $.ajax({
>             url:"../index.html",
>             success: function(r) { that.callBack(r); }
>         });
> };
>
> Salud.

-- 
Choan Gálvez
<choan.galvez en gmail.com>
<http://choangalvez.nom.es/>





Más información sobre la lista de distribución Jquery-Es