分類
JavaScript Programming Rails

Rails RJS Templates 再探

如果看了上一篇,以為有了RJS就不用學不用寫 Javascript 跟 Prototype.js,那就錯了… :p

RJS 你可能會以為是 Ruby JavaScript,Ruby 要統一 JavaScript 了。不過其實是 Remote JavaScript 的意思,顧名思義它主要用於 Ajax Request 的遠端回應。不需要用 Ajax 的地方還是應該乖乖用 Javascript 來寫(你要透過RJS繞一圈來做也沒什麼辦不到啦~) 在rhtml中就寫好Javascript,除了直接寫  Javascript code 之外,也可以用 update_page 和 update_page_tag 來生成Javascript code(感謝contagious補充修正)。一來是效率時效考量,二來也讓RJS保持乾淨。所以還是要會 Javascript跟Prototype才能正確運用RJS的方便性。嗯,還在努力學習中… 真是太神妙了… Orz 

承上一篇的範例,最簡單的例子就是載入畫面,這玩意當然不需要再發 Ajax Request了。

修改 form_remote_tag 加入 loading 跟 complete 要呼叫的 Javascript 函式。及新增 Loading 區塊。

#/app/views/index.rhtml
< %= form_remote_tag :url => { :action =>’note’ },
                    :html => {:id=>’note-form’ } ,
                    :loading => ‘NoteForm.disable()’,
                    :complete => ‘NoteForm.enable()’
%>
< %= text_field_tag ‘note’,nil,:size => 40 %>
< %= submit_tag ‘submit’ %>
< %= end_form_tag %>

< div id=”notes”>< /div>
< div id=”indicator” style=”padding-right: 3px; display: none; padding-left: 3px; right: 0px; background: red; padding-bottom: 3px; color: white; padding-top: 3px; position: absolute; top: 0px”>Loading…< /div>

新增 Javascript 函式兩個,打開Loading及關閉Loading。

#/public/javascripts/applications.js
var NoteForm = {}

NoteForm = {
  disable: function() {
    Element.show(‘indicator’);
    Form.disable(‘note-form’);
},
  enable: function() {
    Element.hide(‘indicator’);
    Form.enable(‘note-form’);
 }
}

順道補充,因為”載入中”實在太常用了,所以 Prototype.js 還有提供 Ajax Global Responders 讓你只要有任一Ajax Request就自動執行。

在〈Rails RJS Templates 再探〉中有 2 則留言

發表迴響

%d 位部落客按了讚: