Pull to refresh

Местное редактирование формы

Reading time3 min
Views827
Проблема

В приложении часто встречаются отдельные фрагменты данных, подвергаемые незначительной пользовательской правке. Было бы неплохо предоставить пользователям приложения простой способ редактирования данных прямо там, где они находятся, не открывая отдельной формы.



Решение

Осуществить в Rails местное редактирование довольно просто, если воспользоватся управляющим элементом InPlaceEditor, принадлежащим библиотеке script.aculo.us, и сопутствующими ему вспомогательными методами. Давайте сразу перейдем к делу и испытаем все это на практике. Нам нужно создать модель и контроллер, с помощью которых будет проводится демонстрация. Чтобы долго не заворачиваться воспользуемся scaffold. В созданном проекте, пусть он будет Contacts (обычная адресная книга). Пишем в консоли:
#script/generate scaffold contacts name:string email:string phone:string address_line1:string address_line2:string city:string country:string postal_code:string

Теперь запустим script/server, перейти по адресу _http://localhost:3000/contacts/ и добавить один-два контакта. Щелкните на ссылке Show в одном из только что добавленных контактов. Появится обычная страница, содержащая детали выбранного контента. Именно на этой странице мы собираемся добавить средство местного редактирования.

Первым делом, чтобы задействовать Ajax, нужно обеспечить включение в представление всех необходимых файлов JavaScript. Обычно я помещаю его в макет, который используется по умолчанию — views/layouts/contacts.html.erb
<%= javascript_include_tag :defaults %>

Дальше нам нужен сам плагин, у ветки Rails 2.0 его нет в комплекте. Пишем в консоли
script/plugin install _http://svn.rubyonrails.org/rails/plugins/in_place_editing

Открываем в редакторе файл app/views/contacts/show.html.erb. Там будет
<p>
<b>Name:</b>
<%=h @contact.name %>
</p>

<p>
<b>Email:</b>
<%=h @contact.email %>
</p>

<p>
<b>Phone:</b>
<%=h @contact.phone %>
</p>...


Изменяем на
<p>
<b>Name:</b>
<%= in_place_editor_field :contact, :name, {}, :rows => 1 %>
</p>


<p>
<b>Email:</b>
<%= in_place_editor_field :contact, :email, {}, :rows => 1 %>
</p>


<p>
<b>Phone:</b>
<%= in_place_editor_field :contact, :phone, {}, :rows => 1 %>
</p>...


Временная платформа
Временная платформа

Так мы добавили в поля средства местного редактирования. Заметьте, что в методе in_place_editor_field() в качестве первого параметра предпологает использование имени экземпляра переменной, а не самого экземпляра (поэтому используется :contact, а не @contact).

После обновления появится такая красота…

Красота :)

Щелчок по кнопке покажет неприятное предупреждение об ошибке JavaScript. Все ведь правильно, для правки информации мы не написали ещё не одного действия. Обращаемся по адресу app/controllers/contacts_controller.rb

Там всего добавим две строчки

Было так
class ContactsController < ApplicationController
# GET /contacts
# GET /contacts.xml
def index
@contacts = Contact.find(:all)


respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @contacts }
end
end


Станет так
class ContactsController < ApplicationController
protect_from_forgery :only => [:create, :delete, :update]
Contact.content_columns.each do |column|
in_place_edit_for :contact, column.name
end
# GET /contacts
# GET /contacts.xml
def index
@contacts = Contact.find(:all)


respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @contacts }
end
end


Первая строчка

protect_from_forgery :only => [:create, :delete, :update]

Включает защиту подделки запроса. Без данной опции работать не будут (подробнее) :)

Contact.content_columns.each do |column|
in_place_edit_for :contact, column.name
end


Теперь все принадлежайшие свойства средства местного редактирования будут сохранять внесенные изменения. Если б вам потребовалось например работать только с полем email, достаточно было б добавить

in_place_edit_for :contact, :email

вместо преведущего куска кода. Вот и все. Удачи в освоении ROR!

Кросспост из моего блога
Tags:
Hubs:
Total votes 11: ↑9 and ↓2+7
Comments8

Articles