Como mencioné en mi anterior tutorial de Ruby on Rails, el JavaScript no obstructivo (UJS) es una de las características nuevas más geniales de Rails 3. UJS permite que el código generado por Rails sea mucho más limpio, ayuda a separar la lógica de JavaScript de sus diseños HTML y desacopla Rieles de la biblioteca de prototipos de JavaScript. En este tutorial, veremos estas características y aprenderemos a usarlas en una aplicación simple de Rails 3..

---

Antecedentes: Qué es un JavaScript discreto?

Para empezar, ¿qué es exactamente UJS? Simplemente, UJS es JavaScript que está separado de su marca HTML. La forma más fácil de describir UJS es con un ejemplo. Tome un controlador de eventos onclick; Podríamos agregarlo de manera molesta:

 Enlazar

O podríamos agregarlo discretamente adjuntando el evento al enlace (usando jQuery en este ejemplo):

 Enlazar 

Como se mencionó en mi introducción, este segundo método tiene una variedad de beneficios, que incluyen una depuración más sencilla y un código más limpio..

"Rails 3, por otro lado, es un marco de JavaScript independiente. En otras palabras, puede utilizar el marco de JavaScript que elija, siempre que exista una implementación de Rails UJS para ese marco".

Hasta la versión 3, Ruby on Rails generaba JavaScript intrusivo. El código resultante no estaba limpio, pero lo que es peor, estaba acoplado estrechamente al marco de Prototype JavaScript. Esto significaba que, a menos que creara un plugin o hackeara Rails, tenía que usar la biblioteca Prototype con los métodos de ayuda de JavaScript de Rail..

Rails 3, por otro lado, es un framework de JavaScript agnóstico. En otras palabras, puede usar el marco de JavaScript de su elección, siempre que exista una implementación de Rails UJS para ese marco. Las implementaciones actuales de UJS incluyen lo siguiente:

• Prototipo (por defecto)
• jQuery
• MooTools

Rails 3 ahora implementa toda su funcionalidad JavaScript Helper (envíos AJAX, solicitudes de confirmación, etc.) de manera discreta al agregar los siguientes atributos personalizados de HTML 5 a los elementos HTML.

• método de datos - el método REST para usar en envíos de formularios.
• confirmación de datos: el mensaje de confirmación que se debe utilizar antes de realizar alguna acción.
• remoto de datos - si es cierto, envíe a través de AJAX.
• datos-deshabilitar-con - deshabilita elementos de formulario durante el envío de un formulario

Por ejemplo, esta etiqueta de enlace

 Destruir

enviaría una solicitud de eliminación de AJAX después de preguntar al usuario "¿Está seguro?"

Se puede imaginar cuánto más difícil de leer sería si todo ese JavaScript estuviera en línea..

Ahora que hemos revisado UJS y cómo Rails implementa UJS, configuremos un proyecto y veamos algunas aplicaciones específicas. Usaremos la biblioteca jQuery y la implementación de UJS en este tutorial.

---

Paso 1: Configuración del proyecto

Ya que estamos creando un nuevo proyecto desde cero, lo primero que debemos hacer es crear el proyecto escribiendo lo siguiente:

 nuevo blog de rieles --skip-prototipo

Observe que le estoy dando instrucciones a Rails para que omita el archivo prototipo de JavaScript, ya que voy a usar la biblioteca jQuery.

Vamos a iniciar el servidor solo para asegurarnos de que todo parece estar funcionando.

Y voilá!

Ahora que hemos configurado nuestro proyecto, debemos agregar jQuery y jQuery UJS a nuestro proyecto. Usted es libre de organizar su JavaScript como lo desee, pero la convención de Rails para estructurar sus archivos JavaScript es la siguiente (todos estos archivos van en público / javascripts):

• archivo JavaScript de framework (jquery.js, prototype.js o mootools.js)
• rails.js: el código que implementa los rieles UJS (para cualquier marco que haya elegido)
• application.js - su aplicación JavaScript

Si aún no lo ha hecho, descargue jquery.js (o consulte un CDN) y rails.js e inclúyalos en su public / javascripts directorio.

Lo último que debemos hacer para comenzar a trabajar es decirle a Rails que incluya estos archivos js en cada una de nuestras páginas. Para hacer esto, abra application.rb en su directorio de configuración y agregue la siguiente línea

 config.action_view.JavaScript_expansions [: defaults] =% w (aplicación jquery rails)

Este elemento de configuración le dice a Rails que incluya los tres archivos JavaScript mencionados anteriormente de manera predeterminada.

Alternativamente, puede tomar jQuery desde un CDN (es decir, http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) si se incluye manualmente una etiqueta de script que apunta a la ubicación correcta. Si hace esto, asegúrese de eliminar 'jquery' del elemento de configuración JavaScript_expansions.

---

Paso 2: Generando algo de código

Para demostrar la funcionalidad UJS de los rieles, primero tendremos que tener algún código para trabajar. Para esta demostración solo vamos a tener un objeto Post simple. Generemos eso ahora

 los rieles generan el andamio Nombre de la publicación: título de la cadena: contenido de la cadena: texto

Y luego migremos nuestra base de datos para crear la tabla de publicaciones..

 rastrillo db: migrar

Ok, estamos bien para ir! Si navegamos a http: // localhost: 3000 / posts / new, Deberíamos ver un formulario para crear una nueva publicación..

Ok, todo esta funcionando! Ahora vamos a profundizar y ver cómo usar las funciones UJS y AJAX integradas en Rails.

---

Paso 3: Añadiendo AJAX

Ahora que se están incluyendo todos los archivos JavaScript necesarios, podemos comenzar a usar Rails 3 para implementar alguna funcionalidad AJAX. Aunque puede escribir todo el JavaScript personalizado que desee, Rails proporciona algunos métodos integrados que puede usar para realizar llamadas AJAX y otras acciones de JavaScript..

Veamos un par de ayudantes de rieles de uso común y el JavaScript que generan.

Envío de formularios AJAX y archivos ERB de Javascript

Si nos fijamos en nuestro formulario de Publicaciones, podemos ver que cada vez que creamos o editamos una Publicación, el formulario se envía manualmente y luego se nos redirige a una vista de solo lectura de esa Publicación. ¿Qué pasaría si quisiéramos enviar ese formulario a través de AJAX en lugar de utilizar un envío manual??

Rails 3 facilita la conversión de cualquier formulario a AJAX. Primero abre tu _form.html.erb parcial en app / views / posts, y cambia la primera línea de:

 <%= form_for(@post) do |f| %>

a

 <%= form_for(@post, :remote => verdadero) hacer | f | %>

Antes de Rails 3, añadiendo : remote => true habría generado un montón de JavaScript en línea dentro de la etiqueta de formulario, pero con Rails 3 UJS, el único cambio es la adición de un atributo personalizado HTML 5. Puedes distinguirlo?

El atributo es data-remote = "true", y el JavaScript UJS de Rails se enlaza a cualquier formulario con ese atributo y los envía a través de AJAX en lugar de un POST tradicional.

Eso es todo lo que se necesita para realizar el envío de AJAX, pero ¿cómo podemos realizar una devolución de llamada después de que se devuelve la llamada de AJAX??

La forma más común de manejar un retorno de una llamada AJAX es mediante el uso de archivos ERB de JavaScript. Estos funcionan exactamente igual que sus archivos ERB normales, pero contienen código JavaScript en lugar de HTML. Vamos a probarlo.

Lo primero que debemos hacer es decirle a nuestro controlador cómo responder a las solicitudes de AJAX. En posts_controller.rb (aplicación / controladores) podemos decirle a nuestro controlador que responda a una solicitud AJAX agregando

 format.js

en cada responder a bloque Que vamos a llamar a través de AJAX. Por ejemplo, podríamos actualizar la acción de crear para que se vea así:

 def create @post = Post.new (params [: post]) respond_to do | format | if @ post.save format.html redirect_to (@post, notice => 'Post created.') format.js else format.html render: action => "new" format.js end end end end

Debido a que no especificamos ninguna opción en el bloque respond_to, Rails responderá a las solicitudes de JavaScript cargando un .js ERB con el mismo nombre que la acción del controlador (create.js.erb, en este caso).

Ahora que nuestro controlador sabe cómo manejar las llamadas AJAX, necesitamos crear nuestras vistas. Para el ejemplo actual, agregue crear.js.erb en tus aplicación / vistas / mensajes directorio. Este archivo se procesará y se ejecutará el JavaScript interno cuando finalice la llamada. Por ahora, simplemente sobrescribiremos la etiqueta del formulario con el título y el contenido de la publicación del blog:

 $ ('cuerpo'). html ("
<%= escape_javaScript(@post.title) %>
").adjuntar("<%= escape_javaScript(@post.content) %>");

Ahora, si creamos una nueva publicación, obtenemos lo siguiente en la pantalla. Éxito!

La ventaja de este método es que puede intercalar el código ruby ​​que configuró en su controlador con su JavaScript, lo que hace que sea realmente fácil manipular su vista con los resultados de una solicitud.

AJAX Callbacks usando eventos personalizados de JavaScript

Cada implementación de Rails UJS también proporciona otra forma de agregar devoluciones de llamada a nuestras llamadas AJAX: eventos personalizados de JavaScript. Veamos otro ejemplo. En nuestra vista de índice de Publicaciones (http: // localhost: 3000 / posts /), podemos ver que cada publicación se puede eliminar a través de un enlace de eliminación.

AJAXify nuestro enlace agregando: remote => true y adicionalmente dándole una clase CSS para que podamos encontrar este POST fácilmente usando un selector CSS.

 <%= link_to 'Destroy', post, :confirm => '¿Estás seguro?',: Method =>: delete,: remote => true,: class => 'delete_post'%>

Que produce el siguiente resultado:

 Destruir

Cada llamada UJS AJAX de rieles proporciona seis eventos personalizados que se pueden adjuntar a:

• ajax: antes - justo antes de la llamada ajax
• ajax: cargando - antes de la llamada ajax, pero después de que se crea el objeto XmlHttpRequest)
• ajax: éxito - exitosa llamada ajax
• ajax: fracaso - llamada ajax fallida
• ajax: completo - finalización de la llamada ajax (después de ajax: success y ajax: failure)
• ajax: despues - después de que se envía la llamada ajax (nota: no después de que regrese)

En nuestro caso agregaremos un detector de eventos a la ajax: éxito en nuestros enlaces de eliminación, y haga que la publicación eliminada se desvanezca en lugar de volver a cargar la página. Agregaremos el siguiente JavaScript a nuestro archivo application.js.

 $ ('. delete_post'). bind ('ajax: success', function () $ (this) .closest ('tr'). fadeOut (););

También tendremos que decirle a nuestro posts_controller que no intente renderizar una vista después de que termine de eliminar la publicación..

 def destroy @post = Post.find (params [: id]) @ post.destroy respond_to do | format | format.html redirect_to (posts_url) format.js render: nothing => true end

Ahora, cuando eliminemos una publicación, se desvanecerá gradualmente..

---

Conclusión

Bueno, ahí lo tienes. Ahora ya sabe cómo realizar llamadas AJAX utilizando Rails 3 UJS. Si bien los ejemplos explicados eran simples, puede usar estas mismas técnicas para agregar todo tipo de interactividad a su proyecto. Espero que esté de acuerdo en que es una gran mejora con respecto a las versiones anteriores y que lo probará en su próximo proyecto Rails.

¿Qué técnicas utilizas al implementar AJAX en Rails??