Обновление Rails до 3.1 - изменение обработки ajax с "render: update" на response_to - PullRequest
8 голосов
/ 27 января 2012

Я обновляю старое приложение rails до 3.1.Приложение в значительной степени работает, но у меня есть некоторые функции ajax, которые мне нужно обновить.(Если это имеет какое-то значение, я использую jquery и coffeescript)

Все существующие функциональные возможности ajax были написаны с использованием render: updates.например,

render :update do |page|
  page.remove "financial_tran_offset_#{params[:ftof_id]}"
  page.replace_html 'details', :partial => 'details', :locals => {:obj => @fire}
end

Я думаю, что новый предпочтительный способ сделать это - использовать response_to?блок для обработки js, но я не уверен в лучшем способе обработки этих различных случаев.

Для первого случая (page.remove), я думаю, что с линией конвейера активов, у меня должен бытьвнешние js в / app / assets / javascripts / для обработки стороны javascript (например, page.remove), но я не уверен, как передать параметры в js-файл.Я предполагаю, что вы можете сделать что-то вроде:

respond_to do |format|  
  format.js {:render :js => {:ftof => params[:ftof_id]}
end

, но я не уверен, как вы могли бы поднять это из файла js.Это правильный способ передачи информации в JS?Или есть другой метод, который я должен использовать?

Для второго случая (page.replace_html) я думаю, что он устарел / удален из 3.1 (согласно apidock ).Я снова подозреваю, что это должно быть использование файла js в каталоге app / assets / javascript, но я не уверен, как мне поступить при рендеринге партиала и передаче этой информации в js.площадь =)

1 Ответ

31 голосов
/ 29 января 2012

Используйте jQuery вместе с js.erb представлениями и respond_to блоками.

Каким бы ни было это действие (для примера мы скажем FoosController#update):

render :update do |page|
  page.remove "financial_tran_offset_#{params[:ftof_id]}"
  page.replace_html 'details', :partial => 'details', :locals => {:obj => @fire}
end

станет:

respond_to do |format|
  format.html
  format.js     # <- this is what we're after
end

с файлом просмотра update.js.erb:

$('#financial_tran_offset_<%= params[:ftof_id] %>').remove();
$('#details').replaceWith('<%= escape_javascript(render(:partial => 'details', :locals => {:obj => @fire})) %>');

update.js.erb будет проанализирован ERb, обработан как JS, отправлен обратно клиенту через Ajax и eval'd.

Вы можете передавать все, что хотите, в эти шаблоны JS. В конце концов, это файлы ERb. Используйте <%= %> и переменные экземпляра, как если бы вы использовали представления HTML / ERb. Если вы вызываете render в ваших представлениях JS / ERb, оберните его escape_javascript, чтобы HTML отображался правильно.


render :update вызывает старые JavaScriptGenerator вспомогательные методы для Prototype. Преобразование в jQuery довольно простое, поскольку они оба делают одно и то же: выбирают элемент DOM и манипулируют им.

Вот хорошая маленькая таблица перевода с типичными манипуляциями. Удалите вспомогательные методы Prototype из контроллера и поместите их аналог JQuery или JS в соответствующее представление JS / ERb:

       Prototype                            jQuery/Javascript
     in controller                    in JS/ERb view (xxxxxx.js.erb)
       ---------                            -----------------
page.alert "message"                 alert('message');
page.hide "id"                       $('#id').hide();
page.insert_html \
         :top,    "id", "content"    $('#id').prepend('content');
         :bottom, "id", "content"    $('#id').append('content');
         :before, "id", "content"    $('#id').before('content');
         :after,  "id", "content"    $('#id').after('content');
page.redirect_to "url"               window.location.href = 'url';
page.reload                          window.location.reload();
page.remove "id"                     $('#id').remove();
page.replace "id", "content"         $('#id').replaceWith('content');
page.replace_html "id", "content"    $('#id').html('content');
page.show "id"                       $('#id').show();
page.toggle "id"                     $('#id').toggle();

Не забывайте свои точки с запятой в каждой строке!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...