Introducción a las plantillas RJS

Una de las novedades de la última versión de Rails ha sido la introducción de las nuevas plantillas RJS que nos dan mayor control sobre los resultados que devolvemos ante peticiones Ajax. Según la descripción, RJS consiste en poder generar Javascript usando código Ruby de nuestra aplicación.

        <!--more-->

        <p>Suena complicado (¿generar Javascript con Ruby? <span class="caps">WTF</span>!?), pero en realidad es lo mejor que se ha inventado desde la mortadela con aceitunas, por lo menos.  Para tratar esta funcionalidad (sólo disponible desde la versión 1.1 de Rails) dejadme presentaros mi última aplicación de juguete: el <a href="http://diccionariomalacitano.sobrerailes.com">Diccionario Malacitano</a></p>


<p>El funcionamiento del <em>Diccionario</em> es trivial, pinchas en una letra del abecedario y se muestran en la columna central una serie de definiciones de vocablos populares en mi tierra de nacimiento.   Esto se hace con una llamada Ajax, es decir, nuestro querido <code>link_to_remote</code>:</p>

1
2
3
4
5
6
7

<%
%w(a b c ch d e f g h i j k l ll m n ñ o p q r s t u v w x y z).each do |letra| 
-%>
<%= link_to_remote letra,
        :url => { :action => :busca, :id => letra },
%>
<% end %>

La acción busca del controlador es igualmente sencilla:

1
2
3

def busca
  @entradas = Entrada.find_all_by_inicial(params[:id], :order => "voz")
end

La cosa se pone interesante ahora: en lugar de devolver una plantilla .rhtml como hasta ahora, en nuestro directorio views/diccionario tenemos una plantilla llamada busca.rjs, que es la que Rails empleará por defecto para esta acción.

1
2

page[:contenido].replace_html :partial => "entrada", :locals => { :entradas => @entradas } 
page[:contenido].visual_effect :highlight, :duration => 1

Es importante señalar que las plantillas .rjs en lugar de generar una página completa se deben usar para modificar una página ya presentada en el navegador del usuario. Así, el objeto page, es un JavaScriptGenerator con el cual podemos acceder a cualquer objeto del DOM de nuestra página. En nuestro caso, modificaremos el elemento con id contenido (es decir, la columna central de nuestra página) con el parcial que hemos llamado entrada y luego haremos un sencillo efecto visual.

Nuestro parcial, _entrada.rhtml es tan sencillo como esto:

1
2
3
4
5
6

<% @entradas.each do |entrada| %>
   <dl>
     <dt><em><strong><%= entrada.voz -%></strong></em>
     <dd><%= textilize_without_paragraph(entrada.texto) -%>
   </dl>
<% end %>

Resulta interesante notar que ahora tenemos más control que antes a la hora de generar resultados como respuestas a llamadas Ajax. Por ejemplo, podríamos decidir cambiar no una sino varias partes de nuestra página: esto es posible si hacemos más llamadas a replace_html para otros objetos DOM de la página que podemos obtener con el objeto page.

Otra posibilidad (de entre las muchas posibles) es hacer que el navegador muestra otra pagína distinta a la actual (en lugar de modificar la que se está viendo) cambiando enteramente usando el método redirect_to. Así, si el controlador lo considera necesario, podemos dirigir al usuario a otra URL distinta. (No hace nada mágico, tan sólo asigna window.location.href, pero mola poder hacerlo sin tener que trastear Javascript directamente)