Использование Ajax при помощи Ruby on Rails
Составитель Брайан Леонард (Brian Leonard), редактор Натали Джереми (Natalie Jeremy)
Февраль 2008 г. [номер версии: V6.0-7]
В данном руководстве рассматривается добавление поддержки Ajax к проекту Ruby on Rails в среде NetBeans. На примере демонстрируется динамическое добавление комментариев в блог.
Содержание
Для работы с этим руководством требуется следующее программное обеспечение и ресурсы.
* Настоящее руководство, написанное для Rails 1.2.5, задействует функцию создания базового интерфейса. Поскольку в Rails 2.0 создание базового интерфейса не поддерживается, следовать указаниям этого руководства при использовании Rails 2.0 невозможно.
Создание демонстрационной базы данных
Настоящее руководство основывается на руководстве Формирование связей между моделями Rails. По завершении работы с этим руководством можно запустить проект, созданный в ходе изучения, и перейти к следующему разделу. В противном случае загрузите файл RubyWebLogModel.zip и следуйте указаниям по созданию демонстрационной базы данных.
Примечание: В настоящем руководстве используется сервер базы данных MySQL. Сведения об использовании сервера базы данных MySQL в приложении на Ruby приведены в статье Установка и настройка поддержки Ruby. В этой статье также описывается использование сервера базы данных Java DB вместо MySQL.
- Откройте окно ввода команд.
- Запустите сервер базы данных MySQL, если он еще не запущен.
Введите следующую команду для создания базы данных разработки и нажмите клавишу Enter.
mysqladmin -u root -p create rubyweblog_development
Примечание: Если пароль для пользователя root не установлен, опустите аргумент -p.
Откройте проект "rubyweblog" в среде IDE.
Примечание: При первом создании или открытии проекта Ruby в среде IDE производится проверка на наличие других установленных версий Ruby кроме пакета JRuby, входящего в комплект поставки. Если такие версии установлены, на экран выводится диалоговое окно для выбора программного обеспечения, которое будет использоваться. Если требуется использовать встроенный интерпретатор JRuby, выберите "JRuby"; при необходимости использования собственной установленной версии Ruby выберите эту версию. Дополнительные сведения приведены в разделе Настройка среды IDE для использования собственной установленной версии Ruby в руководстве "Установка и настройка Ruby".
Если для работы с базой данных требуется пароль, внесите изменения в файл database.yml и укажите пароль (password) в настройках разработки. Сохраните файл.
Для быстрого доступа к файлу database.yml нажмите комбинацию клавиш Alt+Shift+O (Ctrl+Shift+O для компьютеров Макинтош), введите database.yml в текстовом поле "File Name" и нажмите клавишу Enter.-
Щелкните правой кнопкой мыши узел "rubyweblog" и выберите "Migrate Database > To Current Version".
Это действие приводит к добавлению таблиц сообщений и комментариев в базу данных. Ход процесса переноса отображается в окне "Output".
-
Запустите приложение и создайте новое сообщение.
Щелкните ссылку "Permalink" и добавьте к сообщению комментарий.
Обратите внимание, что после добавления комментария вся страница перезагружается.
Создание частичного шаблона
В настоящее время в проекте "rubyweblog" после каждого добавления комментария на страницу происходит перезагрузка как сообщения блога, так и комментариев к нему. Поэтому рекомендуется загружать комментарии динамически, с использованием поддержки Ajax, имеющейся в платформе Ruby on Rails. Для подготовки к использованию Ajax создается частичный шаблон, в котором хранится код просмотра комментариев. Преимущество использования частичного шаблона состоит в том, что его можно вызывать многократно (для каждого комментария в блоге) без визуализации самого сообщения блога.
-
Щелкните правой кнопкой мыши узел "rubyweblog" и выберите "New > RHTML file". Присвойте файлу имя _comment и поместите его в папку app\views\blog.
В результате создается файл _comment, который открывается в области изменения. Обратите внимание, что имя частичного шаблона начинается со знака подчеркивания (_), что отличает этот шаблон от полных шаблонов.
В настоящее время код для отображения комментариев находится в файле show.rhtml. На следующем этапе этот код удаляется из show.rhtml и вставляется в частичный шаблон _comment.rhtml.
-
Выберите "rubyweblog > Views > blog folder" и откройте файл show.rhtml. Скопируйте код для отображения комментариев (см. пример кода 1). Вставьте этот код в _comment.rhtml вместо всего текущего содержимого файла.
<li><%= h comment.comment %><br>
<div style="color: #999; font-size: 8pt">
Posted on <%= comment.created_at.strftime("%B %d, %Y at %I:%M %p") %>
</div>
</li>
-
Перейдите обратно к файлу show.rhtml и удалите следующие две строки.
<% @post_comments.each do |comment| %>
<% end %>
-
Вставьте элемент <div>, выделенный полужирным шрифтом в следующем примере кода. Вставьте код на место удаленных двух строк.
<hr>
<h4>Comments</h4>
<ul>
<div id="comments">
<% @post_comments.each do |comment| %>
<%= render :partial=>"comment", :object => comment %>
<% end %>
</div>
</ul>
Этот код служит для создания элемента <div> с именем "comments". В переменной @post_comments содержатся комментарии, выводимые с помощью частичного шаблона _comment.
-
Выберите "File > Save All", затем запустите приложение.
-
Щелкните ссылку "Permalink" и добавьте к сообщению комментарий.
С этого момента приложение работает так же, как раньше. Однако теперь в него добавлена поддержка Ajax.
Добавление поддержки Ajax
Первым действием по добавлению поддержки Ajax к проекту является добавление библиотек JavaScript Prototype и script.aculo.us. Эти библиотеки поставляются вместе с Ruby on Rails. Библиотека Prototype обеспечивает основу для реализации Ajax в Ruby on Rails, в то время как библиотека script.aculo.us предоставляет визуальные эффекты, которые можно добавлять в приложение.
-
Выберите "Views > layouts" и откройте файл
blog.rhtml.
-
Добавьте следующую строку кода под строкой, содержащей stylesheet_link_tag:
<%= javascript_include_tag :defaults %>
Этот код служит для добавления библиотек JavaScript Prototype и script.aculo.us, поставляемых с Ruby on Rails. Затем необходимо создать form_remote_tag для инициирования действия Ajax.
-
Откройте файл
show.rhtml. Удалите существующий form_tag, выполняющий HTTP POST, и замените его следующим form_remote_tag, выполняющим XMLHTTPRequest.
<% form_remote_tag :url => {:action => "post_comment"} do %>
Этот код инициирует действие Ajax для действия post_comment в файле blog.controller.rb. Пока что после добавления комментария по-прежнему перезагружается вся страница. Если используется form_remote_ tag , и добавлены библиотеки JavaScript, передача данных со страницы методом POST более не производится. Вместо этого теперь осуществляется поиск JavaScript для выполнения; но этот код еще не написан. При принудительном обновлении страницы, однако, можно убедиться в том, что комментарии добавлены.
-
Разверните узел "Controllers" и откройте файл
blog_controller.rb.
Выполните прокрутку до действия post_comment и замените существующий вызов метода redirect_to следующим кодом.
render :update do |page|
page.insert_html :bottom, 'comments', :partial => 'comment'
page[:comment_comment].clear
flash.keep(:post_id)
end
Код, приведенный выше, служит для динамической вставки частичного шаблона _comment.rhtml в нижнюю часть тега <div> комментариев. Важно сохранять post_id во флэш; в противном случае дополнительные комментарии, вставляемые пользователем, будут обладать нулевым post_id и, таким образом, станут "висячими" (в таблице комментариев не определена ссылочная целостность). -
Запустите проект и убедитесь в том, что комментарии обновляются динамически.
Дополнительно: Применение визуальных эффектов
Библиотека script.aculo.us, ранее добавленная в проект, предоставляет визуальные эффекты, которые можно использовать для совершенствования внешнего вида и удобства приложения. Воспользуемся одним из эффектов для подсветки последнего комментария в блоге. Опыт применения этого эффекта можно перенести на другие эффекты в библиотеке script.aculo.us.
-
Откройте файл _comment.rhtml и добавьте в существующий тег <li> следующее свойство "id", выделенное полужирным шрифтом.
<li id=<%= "comment_#{comment.id}" %>>
Эта строка кода служит для маркировки комментария, к которому требуется применить визуальный эффект.
-
Перейдите к файлу blog_controller.rb и добавьте следующий код в конец блока render :update.
page["comment_#{@comment.id}"].visual_effect :highlight, :duration => 3.5
-
Выберите "File > Save All", затем обновите данные в обозревателе (это требуется для создания и передачи в обозреватель кода JavaScript, обрабатывающего визуальный эффект). Добавьте комментарий и обратите внимание на кратковременную подсветку нового комментария.
Что дальше?
>> Дополнительная документация по Ruby в среде NetBeans
