Rails升级到3.1 - 将ajax处理从“render：update”更改为respond_to

I'm upgrading a old rails app to 3.1. The app is pretty much working, but I have some ajax functionality I need to update. (If it makes any difference I'm using jquery and coffeescript)

我正在将旧的rails应用程序升级到3.1。该应用程序非常有用，但我有一些需要更新的ajax功能。（如果它有任何区别我正在使用jquery和coffeescript）

All of the existing ajax functionality was written using render :updates. eg

所有现有的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

I think the new preferred way of doing this is to use a respond_to? block to handle the js, but I'm not sure of the best way of handling these different cases.

我认为新的首选方法是使用respond_to？阻止处理js，但我不确定处理这些不同情况的最佳方法。

For the first case (the page.remove) I think with the asset pipe line, I should have an external js in /app/assets/javascripts/ to handle the javascript side (eg the page.remove) but I'm not sure how to pass the parameters to the js file. I'm guessing you can do something like:

对于第一种情况（page.remove）我认为对于资产管道线，我应该在/ app / assets / javascripts /中有一个外部js来处理javascript端（例如page.remove）但是我不确定如何将参数传递给js文件。我猜你可以这样做：

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

but I'm not sure how you could pick this up from inside the js file. Is this right way to pass information to the js? Or is there another method I should be using?

但我不知道你怎么能从js文件里面选择它。这是将信息传递给js的正确方法吗？或者我应该使用另一种方法吗？

For the second case (the page.replace_html) I think this has been deprecated/removed from 3.1 (according to apidock). I suspect again this should be using the js file in the app/assets/javascript directory, but not sure how I should go about rendering the partial and passing this information into the js.

对于第二种情况（page.replace_html），我认为已经弃用/删除了3.1（根据apidock）。我怀疑这应该是在app / assets / javascript目录中使用js文件，但不确定我应该如何渲染部分并将此信息传递给js。

Thanks for any pointers in this area =)

感谢这个领域的任何指针=）

1 个解决方案

#1

Use jQuery in conjunction withjs.erb views and respond_to blocks.

将jQuery与js.erb视图和respond_to块结合使用。

Whatever this action is (we'll say FoosController#update for the sake of example):

无论这个动作是什么（为了举例，我们会说FoosController #update）：

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

would become:

会成为：

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

with a view file update.js.erb:

使用视图文件update.js.erb：

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

update.js.erb will be parsed by ERb, rendered as JS, sent back to the client via Ajax and eval'd.

update.js.erb将由ERb解析，呈现为JS，通过Ajax和eval'd发送回客户端。

You can pass anything you want to these JS templates. After all, they are ERb files. Use <%= %> and instance variables as you would with HTML/ERb views. If you call render in your JS/ERb views, wrap it with escape_javascript to get HTML to render correctly.

您可以将任何想要的内容传递给这些JS模板。毕竟，它们是ERb文件。使用<％=％>和实例变量，就像使用HTML / ERb视图一样。如果在JS / ERb视图中调用render，请使用escape_javascript包装它以使HTML正确呈现。

render :update calls old JavaScriptGenerator helper methods for Prototype. Conversion to jQuery is pretty simple since they both do the same thing: select a DOM element and manipulate it.

render：update为Prototype调用旧的JavaScriptGenerator帮助器方法。转换为jQuery非常简单，因为它们都做同样的事情：选择一个DOM元素并对其进行操作。

Here's a nice little translation table with typical manipulations. Remove Prototype helper methods from the controller, and place their jQuery or JS counterpart in a corresponding JS/ERb view:

这是一个很好的小翻译表，有典型的操作。从控制器中删除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();

Don't forget your semicolons on each and every line!

不要忘记每一行都有分号！

#1