Rails 3 UJS驅動程序事件

根據Simone Carletti blog post，Rails 3 ajax幫助程序發生了很大變化。我們應該用rails 3編寫更多的javascript，比我們以前用rails 2編寫的版本更高。Rails 3 UJS驅動程序事件

我試圖弄清楚如何顯示ajax加載gif，而ajax查詢正在運行 - 「rails 3 way」。我想出了這種代碼，它使用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 %>

這個效果很好，但我想這是可能寫出這些AJAX事件「觸發」與原型和Scriptaculous助手的幫助下，只是當我們用link_to_function例如喜歡：

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

有沒有辦法做到這一點，或者我們應該直接在javascript中編寫ajax事件「觸發器」，無論是原型還是jQuery？

最好的問候，

菲利普郎

來源

2010-10-14 plang

看着軌源代碼後，我想出了這個解決方案：

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 
%>

不必編寫原始的原型或jQuery代碼，你可以n使用鐵軌助手。

來源

2010-10-15 07:09:58 plang

這個答案現在是三歲，所以你可能已經改變了你對這個問題的看法，可能是時候評論一下更好的方法了。我認爲沒有建設性的接受這樣的答案，這種答案几乎違背了網絡開發的所有良好實踐。 – eloyesp 2013-10-18 13:03:39

是的，我同意這是令人難以置信的老，現在沒有任何價值。這個問題不僅需要更新答案：而是關於舊框架版本的舊技術。它可以簡單地刪除。 – plang 2013-10-20 20:06:12

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 
     }); 
    }); 

    }); 

}());

這樣，所有的JavaScript從視圖，這是不顯眼的JavaScript的想法分離。

來源

2010-12-13 11:24:26

嗨，謝謝你的回答。在一般情況下，我想你是對的。該視圖不適合代碼。但對於UI中「展示gif」和「隱藏gif」或其他「美化」內容這樣簡單的事情，我個人認爲在視圖中直接使用Prototype和Scriptaculous助手非常有用。這就是爲什麼我最終寫了前一個函數。 – plang 2010-12-14 08:15:25

Rails 3 UJS驅動程序事件

回答

相關問題