3.5. Buttons

在前面form_to_remote例子中可以看到， 標準的表單和Ajax表單的唯一區別是在生成的HTML中多了一個onsubmit屬性，剩余的表單和提交按鈕，都是常見的HTML內容。form_to_remote用普通的提交按鈕創建了一個特殊的，Ajax化的表單，submit_to_remote響應的可以為表單創建一個特殊的提交按鈕。例如： <%= form_tag :action => 'reverse' %>?
??<p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>?
??
??<p><%= submit_to_remote 'submit', 'Reverse!',?
??????????:update => 'reversed2',?
??????????:url => { :action => 'reverse' } %></p>?
??
??<p id="reversed2"></p> submit_to_remote?的第一個參數是button的name屬性，第二個參數是設置按鈕的值，也就是按鈕顯示的內容，當你點擊按鈕之后，跟前面發生的情況一樣。 然后，對于form的提交可以選擇是否用Ajax方法實現。考慮下這兩個提交按鈕的不同： <%= form_tag :action => 'reverse' %>?
??<p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>?
??<p id="reversed"></p>?
??<p><%= submit_to_remote 'submit', 'Submit via Ajax',?
??????????:update => 'reversed',?
??????????:url => { :action => 'reverse' } %></p>?
??<p><%= submit_tag "Submit non-Ajax" %></p>?
在實際中，在submit_to_remote提交表單時先要對表單內容進行驗證。例如，在一個注冊用戶的過程中，你需要加上驗證檢查用戶名是否可用的功能。 ? 3.5.1. Buttons for Arbitrary Functions ???button_to_function helper創建一個按鈕來引發JavaScript的function。就像link_to_function一樣，button_to_function的第一個參數是按鈕顯示的文本，第二個參數是Javascript（代碼或是function名）。例如： <%= button_to_function "Greet", "alert('Hello world!')" %> 創建一個按鈕來發起Ajax請求，你可以將button_to_function和remote_function聯合起來使用。remote Helper使用和link_to_remote同樣的參數,并且為remote運行返回需要的Javascript代碼 <%= button_to_function?"Check Time",?
??????remote_function(:update =>?"current_time",?
????????:url => { :action => 'get_time' }) %>?
<div id="current_time"></div>?
3.5.2. Custom Helpers Link_to_function和link_to_remote的存在可能會讓你覺得button_to_function應該也有一個對應的button_to_remote，但是很抱歉，沒這么個東西。不過幸運的是，很容易實現！這也給了我們點啟示，就是怎么樣來實現用戶helper，因為我們工作在chapter3這個controller中.那么定義用戶helper可以放在app/helpers/chapter3_helper.rb或app/helpers/application_helper中，這樣在模板中都可以使用。為了創建一個button_to_remote helper， 我們可以模仿Rails API中關于link_to_remote的做法： 第一個參數是按鈕的標簽，第二個是個hash格式的選項，這個hash選項會作為參數傳入remote_function中。下面就是具體方法的定義： def button_to_remote name, options = {}?
??button_to_function name, remote_function(options)?
end ? 現在你也看到了，這只是button_to_function的一個新包裝，但是它現在有了一個跟link_to_remote一樣的接口： <%= button_to_remote "Get Time Now",?
??????:update => "current_time",?
??????:url????=> { :action => 'get_time' } %>?
<div id="current_time"></div> 編寫用戶helper通常是保持模板的整潔和可維護性的一條最佳途徑。任何時候你發現你寫了一個邏輯很復雜的方法或者是經常使用的方法，考慮下是不是該把它放到helper中呢？



本文轉自 fsjoy1983 51CTO博客，原文鏈接：http://blog.51cto.com/fsjoy/91363，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的3.5. Buttons的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。