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就自動執行。