Rails 3 UJS 驱动程序事件

Question

根据 Simone Carletti blog post 的说法，Rails 3 ajax 助手发生了很大变化。我们应该用 rails 3 编写比使用 rails 2 更多的 javascript。

我试图弄清楚如何在“rails 3 方式”中显示 ajax 加载 gif - 同时 ajax 查询正在运行。我想出了这种代码，它使用 Rails 3 UJS 驱动程序发送的 javascript 事件。本例使用原型：

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<div>
    <%= link_to 'Get', 'finished', :id => "mylink", :remote => true %>
</div>

<%= javascript_tag do %>
        Event.observe('mylink', 'ajax:before', function(event) {
            $('wait').show();
        });
        Event.observe('mylink', 'ajax:complete', function(event) {
            $('wait').hide();
        });
<% end %>

这很好用，但我希望可以在原型和 scriptaculous 助手的帮助下编写这些 ajax 事件“触发器”，就像我们使用 link_to_function 时一样：

<%= 
  link_to_function("toggle visibility") do |page|
    page.toggle "wait"
  end
%>

有没有办法做到这一点，或者我们应该直接在 javascript 中编写 ajax 事件“触发器”，无论是原型还是 jquery？

最好的问候，

菲利普·朗

Answer 1

UJS 的想法是将 javascript 代码移出视图到单独的 js 文件中。你这样做的方式是打败那个目标。相反，我相信您应该有一个带有“dom:loaded”或类似处理程序的 js 文件，该处理程序为 Rails 回调和其他事件设置处理程序。

类似（使用原型）：

(function () {

  $(document).on('dom:loaded', function (event) {

    $$('a[data-remote=true]').each(function (link) {
      link.on('ajax:complete', function (request) {
        // do something
      });
    });

  });

}());

这样所有的 javascripts 都从视图中分离出来，这就是不显眼的 javascript 的想法。

Answer 2

看了rails源码后，我想出了这个解决方案：

  def javascript_event_tag(name, event, &block)
    content = "Event.observe('#{name}', '#{event}', function() {"
    content = content + update_page(&block)
    content = content + "});"

    content_tag(:script, javascript_cdata_section(content))
  end

这使得对 UJS 事件的反应更容易：

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<%= link_to 'ajax call', 'code_on_controller', :id => "mylink", :remote => true %>

<%= 
   javascript_event_tag('mylink', 'ajax:before') do |page|
     page.show 'wait'
   end
 %>
 <%= 
   javascript_event_tag('mylink', 'ajax:complete') do |page|
     page.hide 'wait'
   end
 %>

您可以使用 rails 助手，而不必编写原始原型或 jquery 代码。