Estás en... Home > Programación > Javascript No Obstrusivo en Rails3

Javascript No Obstrusivo en Rails3

0

Publicado el 27/02/2010 en Programación por Jose M. Carbonell

Jose M. Carbonell

Ingeniero de sistemas y apasionado de Ruby on Rails, desarrollo web y metodologías ágiles. Uno de los primeros en utilizar Ruby on Rails Rails en España.

Rails 3 trae consigo una reescritura de los helpers de Javascript. Entre otras cosas lo que se ha pretendido es que los actuales helpers no generen HTML con javascript de forma obstrusiva.

Por ejemplo, el helper 'link_to' usado para generar una acción DELETE:

<%= link_to "Delete", post_path(@post), :method => 'delete' %>

hasta ahora generaba el siguiente código:

<a href="/posts/1" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);f.submit(); };return false;">Delete</a>

lo cual es totalmente obstrusivo y dependiente del framework Prototype.

Ahora el código generado será el siguiente:

<a rel="nofollow" data-method="delete" data-confirm="Are you sure?" class="delete" href="/posts/1">Delete</a>

Este código no depende de ningún framework javascript y nos ofrece flexibilidad a la hora de crear los comportamientos.

Para que esto funcione primero hay que elegir el "driver" que se va a utilizar. Rails 3 ofrece varios drivers javascript, según el framework, que será usado para gestionar con estos elementos. Un driver no es más que un archivo javascript con el código necesario para detectar ciertos elementos, por ejemplo, detectando el atributo "data-method='delete'" y actuando en consecuencia.

Por ahora existen 2 drivers oficiales, uno para jQuery http://github.com/rails/jquery-ujs y otro para Prototype http://github.com/rails/prototype-ujs. En caso de decantarnos por el framework Mootools podemos usar el de Kevin Valdek http://github.com/kevinvaldek/mootools-ujs o hacernos uno nosotros. Lo mismo con cualquier framework.

Para hacerlo funcionar hay que descargar el driver, que normalmente se llamará 'rails.js'. Deberemos guardarlo en "#{Rails.root}/public/javascripts", por ejemplo e incluir las librerias javascript en la sección head:

<%= javascript_include_tag 'prototype.js' %>
<%= javascript_include_tag 'rails' %>

El último paso que hay que hacer y que no está muy documentado es añadir el token de autentificación que necesita Rails las acciones POST (y así prevenir los ataques CSRF. Esto se realiza añadiendo dos etiquetas en la sección head:

<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="<%= form_authenticity_token %>" />

o utilizando un nuevo helper:

<%= csrf_meta_tag %>

que en realidad hace lo mismo pero es más fácil de recordar.

Por último, Rails 3 ya no ofrece helpers como "remote_form_for" o "link_to_remote". En su lugar utilizaremos los tradicionales no-ajax con la opción "remote => true", por ejemplo:

<% form_for @post, :remote => true do %>
<% end %>

que genera

<form action="/posts/1" class="edit_post" data-remote="true" method="post">

o

<%= "link_to @post.title, @post, :remote => true" %>

que genera

<a href="/admin/posts" data-remote="true">Post 1</a>

Y esto es todo. Rails 3 todavía esta en versión beta y la documentación no es todo lo completa que nos gustaría. Espero que esto os ayude hasta que ésta sea más completa.

Bookmark and Share Compartir

0 comentarios sobre "Javascript No Obstrusivo en Rails3"

Deja tu Comentario


Enviar comentario