Rails升级到3.1 - 将ajax处理从"render:update"更改为respond_to

Question

我正在将旧的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

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

对于第一种情况(page.remove),我认为对于资产管道线,我应该在/ app/assets/javascripts /中有一个外部js来处理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).我怀疑这应该是在app/assets/javascript目录中使用js文件,但不确定我应该如何渲染部分并将此信息传递给js.

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

Answer 1

将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视图一样使用和实例变量.如果调用renderJS/ERb视图,请将其包装escape_javascript以使HTML正确呈现.

render :update调用JavaScriptGeneratorPrototype的旧助手方法.转换为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();

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