Keep Learning Conhecimento nunca é o bastante

Edit in place restful com Rails 2.1

A funcionalidade “edit in place” é aquela na qual, ao clicar em um texto na página web, disponibiliza-se um campo para edição do texto clicado.

Nas versões “não-Rest” do Rails, era comum o uso do plugin in_place_editing para conseguir essa funcionalidade. Para as versões mais novas, ainda é possível utilizar esse plugin, mas a solução acaba ficando bem grosseira. Pesquisando sobre isso, encontrei o plugin better-edit-in-place, que permite utilizar a interface Rest padrão do Rails para conseguir a funcionalidade.

Depois de instalar o plugin, você precisa de apenas três passos para fazer tudo funcionar:

1. Escrever/incrementar os testes funcionais do controller (test first, aqui com Shoulda e… ahn… fixtures…):

context "on Ajax PUT to :update" do
  setup do
    xhr :put, :update, :id => emails(:one).id, :email => {:address => 'new_email@email.com'}
  end
 
  should_assign_to :email
  should_respond_with :success
  should_not_set_the_flash
 
  should "update the email address" do
    assert_equal assigns(:email).address, 'new_email@email.com'
  end
end

2. Criar uma ação update no controller do recurso ou adicionar o formato correto ao bloco respond_to:

def update
  @email = Email.find(params[:id])
  @email.update_attribute(:address, params[:email][:address])
  respond_to do |format|
    format.js { render :json => @email }
    format.html #voce que sabe...
  end
end

3. Ajustar seu markup para que a parte JavaScript do plugin funcione. Para isso, basta utilizar um helper disponibilizado pelo plugin:

<%= edit_in_place(email, :address) -%>

Pronto. Ao abrir a página e clicar sobre o elemento span que exibe o texto do atributo passado ao helper, o mesmo será substituído por uma caixa de texto com um botão para salvar e um link para cancelar a ação. Tudo simples e de forma muito mais limpa. O plugin também funciona com recursos aninhados.

Obs: note que ignorei “detalhes” como validação do modelo, entre outros importantes. Fiz isso apenas pra encurtar o post, não faça o mesmo em aplicações reais. 😉

Opa!!! Muito bom o post … essa característica é bem interessante e ajuda na idéia do “don’t let me think” para o usuário.

Um abraço.

opa, boa dica 🙂 estava correndo atrás de uma evolução do in_place_editing e cai no seu blog com a sua dica.

falou.

Salvou, rapaz!
Valeu!