Otro Blog Geek

Mi última pelea con Prototype ha estado protagonizada por los eventos. Tenía que conseguir capturar el evento de scroll sobre un div y después de hacer algunas cosas cancelar el comportamiento por defecto del evento y evitar la propagación al scroll general de la página.

Al final descubrí la función Event.stop() de Prototype. En la documentación dice lo siguiente:

Llamándola en un evento, para la propagación y previene el comportamiento por defecto.

Su uso es simple. Veamos un ejemplo.

Aquí tenéis una página con un par de ejemplos. Podéis ver el ejemplo viendo el código fuente de la página.

• El primer formulario mostrará un alert() con el valor
• El segundo formulario hará una petición GET (evidentemente sin ningún efecto) sobre la misma página
• El primer párrafo con scroll ignora el uso de la rueda del ratón
• El segundo párrafo funciona igual que siempre

Desde hace unos días tengo algunos problemas con un módulo en Javascript que estoy desarrollando en el trabajo. El script hace una petición AJAX y obtiene un XML. El problema es que Internet Explorer cachea el XML cuando le apetece y eso provoca que a veces el módulo no cargue como debería. La solución es tan sencilla como añadir un nuevo argumento aleatorio a la petición, evitando así que Internet Explorer la cargue desde la caché la siguiente vez.

El siguiente ejemplo está basado en Prototype

Solución via: The Arsenalist

Desde que empecé a trabajar mi función principal es la de desarrollador web. Básicamente me peleo todo el día con Prototype y con AJAX. Después de unas cuantas semana Prototype se ha convertido en parte en un gran aliado, pero también en un enemigo a batir. Conocer el framework con profundidad es esencial para trabajar con él y a veces no es fácil. Una de las cosas que mas trabajo me costó entender fue la utilidad de las funciones bind() y bindAsEventListener(). Ambas son muy potentes y muy útiles cuando se utilizan bien, pero comprender su uso puede ser difícil y a veces nos pueden dar quebraderos de cabeza.

Voy a intentar explicar de forma clara y simple como se usan estas dos funciones y para qué sirven. Vayamos por partes.

1. bind(): Es una de las estrellas en Prototype y también es una de las más trabajo suele costar entender. Imaginemos un objeto que tiene métodos para acceder a sus datos miembro. Usando bind() podemos hacer que esos objetos accedan a datos miembro de otros objetos en lugar de a los del objeto original. Veamos un ejemplo:
   1.  
   2. var Clase1 = Class.create({
   3.   initialize: function(msg){
   4.     this.mensaje = msg;
   5.   },
   6.   log: function(){
   7.     console.log(this.mensaje);
   8.   }
   9. });
   10. var objeto1 = new Clase1("Mensaje, Objeto1");
   11. var objeto2 = new Clase1("Mensaje, Objeto2");
   12.  
   13. objeto1.log(); //Genera -> Mensaje, Objeto1
   14. objeto2.log(); //Genera -> Mensaje, Objeto2
   15. //Creamos el bind de alerta para que se ejecute en el
   16. //contexto del objeto2.
   17. var log_bind = objeto1.log.bind(objeto2);
   18. log_bind(); //Genera -> Mensaje, Objeto2

   Como vemos, la llamada a log_bind() realiza la llamada a objeto1.bind() usando el contexto del objeto2, lo cual en terminos prácticos equivale a hacer objeto2.bind()

   También podemos usar bind() para añadir argumentos a la llamada a una función. Veamos un ejemplo de esto.

   1. var Clase2 = Class.create({
   2.   initialize: function(msg){
   3.     this.mensaje = msg;
   4.   },
   5.   log: function(){
   6.     console.log(this.mensaje + ‘ ‘ + $A(arguments).join(‘, ‘));
   7.   }
   8. });
   9.  
   10. var objeto3 = new Clase2("Mensaje, Objeto3");
   11. objeto3.log();
   12. var log_bind_mas_argumentos = objeto3.log.bind(objeto3,1,2,3,4,‘ lo que sea’);
   13. log_bind_mas_argumentos();

   Esta vez no cambiamos el contexto de la función, pero añadimos varios argumentos extra que luego se extraen usando $A(arguments), convirtiéndolos así en un Array de Prototype.

2. bindAsEventListener(): Una vez hemos comprendido el uso que tiene bind() es fácil entender la dinámica de bindAsEventListener(). Su funcionamiento es el mismo que el de la función bind() pero con adaptaciones específicas para un contexto concreto, el de la captura de eventos.Este es el mismo ejemplo que hay en el API de Prototype pero un poco retocado:
   1. var obj = {
   2.   name: ‘Un bonito ejemplo’
   3. };
   4.  
   5. function handler(evento){
   6.   var tag = Event.element(evento).tagName.toLowerCase();
   7.   var data = $A(arguments);
   8.   data.shift();
   9.   console.log(this.name + ‘\nHas clickado en ‘ + tag + ‘\nOtros argumentos: ‘ + data.join(‘, ‘));
   10. }
   11. $(‘elemento’).observe(‘click’, handler.bindAsEventListener(obj, 1, 2, 3));

   Por partes, el objeto obj tiene una propiedad name y la función handler(evento) se encarga de manejar el evento una vez se ha disparado. Esta función extrae el nombre del elemento de la página que ha disparado el evento, los argumentos extra pasados a la función y los muestra todos por la consola de facebook. La clave de todo el ejemplo es la línea:

   1. $(‘elemento’).observe(‘click’, handler.bindAsEventListener(obj, 1, 2, 3));

   Esta línea asigna la función handler(evento) como manejadora del evento onclick del elemento y además cambia su contexto al del objeto obj y le pasa 3 números como argumento. Pero echando un segundo vistazo a la función vemos que en ningún momento le pasamos el argumento evento. Esa es precisamente la función especial de bindAsEventListener() pasar como primer argumento el objeto de la clase Event que representa al evento que se ha disparado.

   Usando bindAsEventListener() siempre recibiremos el objeto Event como primer argumento, sin necesidad de pasar ese evento de forma manual.

Espero que después de este par de ejemplo quede todo un poco más claro, como siempre se aceptan preguntas, dudas y sugerencias y para todo el código que necesitéis pegar podéis usar Pastie