Usando jQuery com Rails

04 de Junho de 2008

Leia em 1 minuto

Pode me chamar de velha guarda, mas prefiro escrever meu próprio Javascript. E depois que comecei a trabalhar com Ruby on Rails e jQuery, minha vida ficou infinitamente mais simples.

E dessa simplicidade, surgiu o rails.js, um dispatcher de eventos feito para ser usado com jQuery, no Rails.

A idéia é que, baseado no controller e action que está sendo renderizado, seja chamado o método correto do Javascript para aquele contexto.

Para ver como funciona na prática, crie um novo projeto com o comando abaixo.

rails pages

Você precisará de um controller chamado "pages", com algumas actions.

script/generate controller index show new create edit update

Crie também um arquivo de layout em "app/views/layouts/application.html.erb" com o conteúdo abaixo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Pages</title>
        <%= javascript_include_tag "jquery", "rails", "pages" %>

        <meta name="rails-controller" content="<%= controller.controller_name %>" />
        <meta name="rails-action" content="<%= controller.action_name %>" />
    </head>
<body>
    <%= yield %>
</body>
</html>

O segredo está nesses dois campos meta, com os nomes do controller e action. É baseado neles que o rails.js irá chamar o método correto.

Agora vem o passo mais importante de todos: remova os arquivos do Prototype. Afinal, eles não servirão para nada! ;)

rm public/javascripts/*

Você precisará do jQuery e do rails.js. Copie-os para o diretório "public/javascripts". Crie também um arquivo em "public/javascripts/pages.js".

Agora, vem a parte legal! Por exemplo, imagine que você queira executar algum Javascript para as actions "index" e "new". Você pode criar algo como isso.

Rails.pages = {
    'index': function() {
        alert('calling js for index');
    },

    'new': function() {
        alert('calling js for new');
    }
}

Se você acessar o endereço http://localhost:3000/pages/, o método Rails.pages.index() será chamado.

Exemplo de chamada ao rails.js

E o que acontece se eu acessar a action "create", que normalmente é o fallback do método "new"? Quando você acessar a action "create", o método "new" será chamado no lugar, assim como a action "update" chamará o método "edit". Para ver como isso funciona, experimente acessar os endereços http://localhost:3000/pages/new e http://localhost:3000/pages/create.

Eu tenho uma opinião bastante forte a respeito do Rails gerar Javascript. É conveniente? Claro que é! Mas ainda sim prefiro escrever meu próprio Javascript.

Você pode fazer o download deste exemplo aqui.