View Helper - form_tag / form_for / form_with

閱讀時間約 6 分鐘
54在 Rail 的 MVC 架構中,M 是負責驗證與邏輯、以及轉譯向資料庫溝通的角色; C 是負責資料的搬運,搬往 M 或 V; V 則是負責畫面的呈現、及使用者與資料的互動,並將請求送往C,接著得到 C 送回來的資料。
那關於資料的傳輸,一定是要先有個表單,Rails 提供了三個方法,依照需求使用,不過用過之後,通常就會知道哪個最好用。

form_tag

<%= form_tag url: '/books', method: :post do %>      
  <input type="text">     
  <input type="submit">  
<% end %>
form_tag 後面接續的是,這份表單按下送出後,要以什麼方法(post),往哪個地方送(‘/books’)
在 block 裡面則是要自己刻出 html 的 input 標籤
透過檢視原始碼可以知道,這些 view helper 幫你做了什麼事情,我們來看看 form_tag 在瀏覽器上變成什麼:
<form action="/posts/1" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="L4E9KoJ8Cd9YdzAlTvMsKo4it45PXdt4wt0h-M3b6YVtpAAawmncLwU5zgohWiJ2Ke-6obJKCiD5D824Jyjt-g" autocomplete="off" />   
  <input type="text">   
  <input type="submit">  
</form>
是不是很厲害,短短的 form_tag,幫你做了這麼多事情。其中第二個隱藏欄位,authenticity_token,就是使用 view helper 一大原因,它會幫你做出一個自動產生 authenticity_token 的隱藏欄位,value 後面那一大串就是這個欄位的產物。(如果你按下重新整理,他就會在跳一組新的)

form_for

更厲害更方便的 view helper!
在 form_for 後面接上 controller 建立的實體變數,form_for 會去判斷這個實體變數,有沒有東西,並以此決定,這份表單的 action 跟 method 為何。
HOW? 因為整體的過程是這樣:當我們在網頁上按下新增功能時,會往 /books/new 的網址去找 BooksController 的 new action ,new action 會去找 new.html.erb,所以在 new.html.erb 裡的 form_for 的實體變數,是從 new action 來的,由於是新增,資料庫裡沒有東西,所以 form_for 就知道,我現在是在新增一個新的物件,那我應該是要送往 create。
因此那個 form.submit 會是 create 字樣。
所以同樣的 form_for 換到 edit.html.erb 裡,在 edit 的頁面上,submit 鈕顯示的字樣是 update,因為 @book 有抓到東西是從資料庫過來的,那代表我們是要從既有資料進行更新。
<%= form_for @book do |f| %>

<%= form.label :title %>
<%= form.text_field :title %>

<%= form.submit %>

<% end %>
此外,form_for 還有附加功能是 form.labe 跟 form.text_field 等等的工具可以使用,非常方便。

我們來看看網頁原始碼,form 幫我們做了什麼:
<label for="book_title">Title</label>
<input type="text" name="book[title]" id="book_title" />

<input type="submit" name="commit" value="Create Book" data-disable-with="Create Book" />
是不是超厲害!
我們輸入的 form,在瀏覽器上轉換成 html 的標籤、屬性、值。

form_with

form_with 則是上面兩個的混血兒,直接來看 code:
<%= form_with model: @book, url: '/store' do |f| %>          
  <%= f.label :title %>     
  <%= f.text_field :title %>      
  <%= f.submit %> 
<% end %>
有 form_for 的實體變數,也有 form_tag 的 url,當表單要送往的地方不如預期時,可以使用 form_with 自訂 url,讓表單送往我們想要它去的地方,以防它自己找錯路。

小結

這篇介紹了 MVC 裡,V 會使用到的表單語法,個人比較常用到的是 form_for 跟 form_with。
form_tag 還要自己打 html,對我來說沒有很方便,form_for 幾乎能代替它,但如果需要 url,再用 form_with 就好。
至於上面提到的 authenticity token 是什麼?我們改天再來寫一篇介紹一下。

1會員
13Content count
留言0
查看全部
發表第一個留言支持創作者!
Mike的沙龍 的其他內容
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
在 Rails 裡常常可以看到 redirect_to 跟 render,但這兩者到底有什麼差異呢? Redirect_to redirect_to 後面接網址路徑,是用來轉到該網址路徑去,也就是換到一個新的頁面。 如果在 new 的頁面上 (同一條溪流,這一秒的水流跟下一秒的水流是不一樣的水流)
Find 輸入一個 id 參數後,尋找相對應的一筆資料。 在 SQL 的部分: 如果 find 找不到相對應的資料時,會跳出兇殘的錯誤訊息: Find_by 輸入一個或多個參數後,找到相對應的一筆資料。 在 SQL 的部分: Where 輸入一個或多個參數後,找到相對應的多筆資料。
避免使用者在資料寫入時,強行新增非官網的資料時,所進行的預設阻擋功能。 所以必須新增一個「白名單」,才能正常寫入: 寫了這段後,除了 permit 的資料,其他額外的資料都會被過濾掉,不會進來。
MVC是一套網頁開發的架構流程,代表著從前端到後端的各自分工。 M: Model 多個 model 建立的 tables 們能夠透過 foreign_key 或是 belongs_to / has_one / has_many,將彼此的資料產生關聯。 V: View C: Controller
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
在 Rails 裡常常可以看到 redirect_to 跟 render,但這兩者到底有什麼差異呢? Redirect_to redirect_to 後面接網址路徑,是用來轉到該網址路徑去,也就是換到一個新的頁面。 如果在 new 的頁面上 (同一條溪流,這一秒的水流跟下一秒的水流是不一樣的水流)
Find 輸入一個 id 參數後,尋找相對應的一筆資料。 在 SQL 的部分: 如果 find 找不到相對應的資料時,會跳出兇殘的錯誤訊息: Find_by 輸入一個或多個參數後,找到相對應的一筆資料。 在 SQL 的部分: Where 輸入一個或多個參數後,找到相對應的多筆資料。
避免使用者在資料寫入時,強行新增非官網的資料時,所進行的預設阻擋功能。 所以必須新增一個「白名單」,才能正常寫入: 寫了這段後,除了 permit 的資料,其他額外的資料都會被過濾掉,不會進來。
MVC是一套網頁開發的架構流程,代表著從前端到後端的各自分工。 M: Model 多個 model 建立的 tables 們能夠透過 foreign_key 或是 belongs_to / has_one / has_many,將彼此的資料產生關聯。 V: View C: Controller
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
在這部作品中,作者透過長期的觀察與研究,分析了今日國家社會形成短視習慣的原因和影響,藉此凸顯出長遠眼光的重要性,並且描繪以長遠眼光改變這種狹隘視野的願景,打造出一個永續不息的自然和社會環境。
Thumbnail
可能包含敏感內容
……看著那對渾圓酥軟的胸在眼前搖曳,IRyS也忍不住伸手輕撫那為她賣力搖擺的腰際,接著一路沿著腹部,從小肚臍到肋骨,在順著肋骨到胸下緣,沿著緣弧的曲線最後包覆那令人垂延的酥胸,途中不忘戲弄了一下那挺立的花蕊,使得Bae為此而輕顫不已……
Thumbnail
Cuba helped to vaccinate many people in spite of the US sanctions. This is another video that was very educational for me:
Thumbnail
市政府這一代平常人來人往,周末想必更是人潮壅擠,我建議平日中午或下午來這部用定位也有位子,雖然有不能說有到人煙稀少,但至少坐在哪啡廳內還是有幾桌空位的,不管你是要讀想看書時光或是打打字寫寫東西,都還能假裝悠閒給假掰一下😄
Thumbnail
輕蔑自由吧、輕蔑貞節吧、輕蔑希望吧 輕蔑喜悅吧、輕蔑悲劇吧、輕蔑休息吧 輕蔑溫柔吧、輕蔑光芒吧 沒錯,我已經做出了選擇。 最能象徵日本泡沫經濟時代的當代漫畫名家——岡崎京子 封筆前最高傑作!蜷川實花同名電影改編原著!
Thumbnail
View  Point 在寮國的登山道,一種是由導遊及村導帶著你上山的 另外一種則是自己到達登山口 入口處會有個收費小涼亭 付費後自行攀爬上去 好處是步道有人維護及使用者付費 同時也為當地帶來收入 因為在寮國多數旅行社背後的資方來自歐美國家 最終回饋到當地的是薪酬而非獲利 當然適時引入環保概念並加以
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
在這部作品中,作者透過長期的觀察與研究,分析了今日國家社會形成短視習慣的原因和影響,藉此凸顯出長遠眼光的重要性,並且描繪以長遠眼光改變這種狹隘視野的願景,打造出一個永續不息的自然和社會環境。
Thumbnail
可能包含敏感內容
……看著那對渾圓酥軟的胸在眼前搖曳,IRyS也忍不住伸手輕撫那為她賣力搖擺的腰際,接著一路沿著腹部,從小肚臍到肋骨,在順著肋骨到胸下緣,沿著緣弧的曲線最後包覆那令人垂延的酥胸,途中不忘戲弄了一下那挺立的花蕊,使得Bae為此而輕顫不已……
Thumbnail
Cuba helped to vaccinate many people in spite of the US sanctions. This is another video that was very educational for me:
Thumbnail
市政府這一代平常人來人往,周末想必更是人潮壅擠,我建議平日中午或下午來這部用定位也有位子,雖然有不能說有到人煙稀少,但至少坐在哪啡廳內還是有幾桌空位的,不管你是要讀想看書時光或是打打字寫寫東西,都還能假裝悠閒給假掰一下😄
Thumbnail
輕蔑自由吧、輕蔑貞節吧、輕蔑希望吧 輕蔑喜悅吧、輕蔑悲劇吧、輕蔑休息吧 輕蔑溫柔吧、輕蔑光芒吧 沒錯,我已經做出了選擇。 最能象徵日本泡沫經濟時代的當代漫畫名家——岡崎京子 封筆前最高傑作!蜷川實花同名電影改編原著!
Thumbnail
View  Point 在寮國的登山道,一種是由導遊及村導帶著你上山的 另外一種則是自己到達登山口 入口處會有個收費小涼亭 付費後自行攀爬上去 好處是步道有人維護及使用者付費 同時也為當地帶來收入 因為在寮國多數旅行社背後的資方來自歐美國家 最終回饋到當地的是薪酬而非獲利 當然適時引入環保概念並加以