Mike的沙龍

View Helper - form_tag / form_for / form_with

Mike-avatar-img
Mike
更新於 2022/08/13閱讀時間約 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 是什麼？我們改天再來寫一篇介紹一下。

avatar-img
Mike的沙龍
1會員
13內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
Mike的沙龍 的其他內容
Rake in Rails
將 Rails 環境帶入 rake 裡，讓 rake 可以使用 Rails 的元素，像是 Model： 如果沒有導入環境給 rake ，rake 就找不到 User ，就沒辦法 new 了。 終端機輸入： 透過回圈，一個指令，產生多筆資料： 更複雜的：
#Rails#Rake
樂觀鎖 vs 悲觀鎖
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前，我們先來了解一下，這兩個鎖是應用在什麼地方？ 資料庫 為了達成這件萬中選一的情況，就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想，可以很清楚的知道，這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任，所採取的行為。 樂觀鎖
Redirect_to / Render / Render Partial
在 Rails 裡常常可以看到 redirect_to 跟 render，但這兩者到底有什麼差異呢？ Redirect_to redirect_to 後面接網址路徑，是用來轉到該網址路徑去，也就是換到一個新的頁面。 如果在 new 的頁面上 （同一條溪流，這一秒的水流跟下一秒的水流是不一樣的水流）
#Rails#Render
搜尋大對決 Find, Find_by, Where
Find 輸入一個 id 參數後，尋找相對應的一筆資料。 在 SQL 的部分： 如果 find 找不到相對應的資料時，會跳出兇殘的錯誤訊息： Find_by 輸入一個或多個參數後，找到相對應的一筆資料。 在 SQL 的部分： Where 輸入一個或多個參數後，找到相對應的多筆資料。
ActiveModel::ForbiddenAttributesError
避免使用者在資料寫入時，強行新增非官網的資料時，所進行的預設阻擋功能。 所以必須新增一個「白名單」，才能正常寫入： 寫了這段後，除了 permit 的資料，其他額外的資料都會被過濾掉，不會進來。
MVC
MVC是一套網頁開發的架構流程，代表著從前端到後端的各自分工。 M: Model 多個 model 建立的 tables 們能夠透過 foreign_key 或是 belongs_to / has_one / has_many，將彼此的資料產生關聯。 V: View C: Controller
Rake in Rails
將 Rails 環境帶入 rake 裡，讓 rake 可以使用 Rails 的元素，像是 Model： 如果沒有導入環境給 rake ，rake 就找不到 User ，就沒辦法 new 了。 終端機輸入： 透過回圈，一個指令，產生多筆資料： 更複雜的：
#Rails#Rake
樂觀鎖 vs 悲觀鎖
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前，我們先來了解一下，這兩個鎖是應用在什麼地方？ 資料庫 為了達成這件萬中選一的情況，就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想，可以很清楚的知道，這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任，所採取的行為。 樂觀鎖
Redirect_to / Render / Render Partial
在 Rails 裡常常可以看到 redirect_to 跟 render，但這兩者到底有什麼差異呢？ Redirect_to redirect_to 後面接網址路徑，是用來轉到該網址路徑去，也就是換到一個新的頁面。 如果在 new 的頁面上 （同一條溪流，這一秒的水流跟下一秒的水流是不一樣的水流）
#Rails#Render
搜尋大對決 Find, Find_by, Where
Find 輸入一個 id 參數後，尋找相對應的一筆資料。 在 SQL 的部分： 如果 find 找不到相對應的資料時，會跳出兇殘的錯誤訊息： Find_by 輸入一個或多個參數後，找到相對應的一筆資料。 在 SQL 的部分： Where 輸入一個或多個參數後，找到相對應的多筆資料。
ActiveModel::ForbiddenAttributesError
避免使用者在資料寫入時，強行新增非官網的資料時，所進行的預設阻擋功能。 所以必須新增一個「白名單」，才能正常寫入： 寫了這段後，除了 permit 的資料，其他額外的資料都會被過濾掉，不會進來。
MVC
MVC是一套網頁開發的架構流程，代表著從前端到後端的各自分工。 M: Model 多個 model 建立的 tables 們能夠透過 foreign_key 或是 belongs_to / has_one / has_many，將彼此的資料產生關聯。 V: View C: Controller
你可能也想看
Google News 追蹤
avatar-avatar
VK科技閱讀時間
2024/12/17
Thumbnail
美股定期定額從國泰世華 CUBE App 輕鬆開始
*合作聲明與警語： 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
#國泰世華#美股#定期定額
avatar-avatar
Cyan Salon
2024/02/18
Thumbnail
《深時遠見（The Long View）》
在這部作品中，作者透過長期的觀察與研究，分析了今日國家社會形成短視習慣的原因和影響，藉此凸顯出長遠眼光的重要性，並且描繪以長遠眼光改變這種狹隘視野的願景，打造出一個永續不息的自然和社會環境。
#閱讀#閱讀心得#閱讀筆記
avatar-avatar
HKT實驗室
2023/12/29
Thumbnail
View Binding 快速入門指南
本課程學習如何使用 View Binding。
#Android教學#Android入門指南
avatar-avatar
LiiMii Here
2023/12/04
Thumbnail
可能包含敏感內容
【HoloEN】🔞The View 【BaeRyS】
……看著那對渾圓酥軟的胸在眼前搖曳，IRyS也忍不住伸手輕撫那為她賣力搖擺的腰際，接著一路沿著腹部，從小肚臍到肋骨，在順著肋骨到胸下緣，沿著緣弧的曲線最後包覆那令人垂延的酥胸，途中不忘戲弄了一下那挺立的花蕊，使得Bae為此而輕顫不已……
#HoloEN#BaeRyS#百合
avatar-avatar
廢話大王的沙龍
2023/12/04
A Room with a View
不會有人看的女權自助餐
#房間#認同#休息
avatar-avatar
Kentzeur（aka 邱胤瑋）的沙龍
2023/07/28
Panoramic view of learning
Sometimes I just want to have fun
avatar-avatar
Mei Wechner的沙龍
2022/05/20
Thumbnail
Cuba helped to vaccinate many people in spite of the US san
Cuba helped to vaccinate many people in spite of the US sanctions. This is another video that was very educational for me:
avatar-avatar
花花說...的沙龍
2021/12/28
Thumbnail
台北信義區｜高樓view咖啡廳｜WIRED TOKYO日式洋食餐廳 ｜TSUTAYA BOOKSTORE 蔦屋書店
市政府這一代平常人來人往，周末想必更是人潮壅擠，我建議平日中午或下午來這部用定位也有位子，雖然有不能說有到人煙稀少，但至少坐在哪啡廳內還是有幾桌空位的，不管你是要讀想看書時光或是打打字寫寫東西，都還能假裝悠閒給假掰一下😄
#信義區#市政府站#捷運美食
avatar-avatar
臉譜出版的沙龍
2021/11/01
Thumbnail
Helter Skelter 惡女羅曼死（蜷川實花同名電影改編原著，隨書贈台灣版獨家限量海
輕蔑自由吧、輕蔑貞節吧、輕蔑希望吧 輕蔑喜悅吧、輕蔑悲劇吧、輕蔑休息吧 輕蔑溫柔吧、輕蔑光芒吧 沒錯，我已經做出了選擇。 最能象徵日本泡沫經濟時代的當代漫畫名家——岡崎京子 封筆前最高傑作！蜷川實花同名電影改編原著！
#漫畫#視覺文學#惡女羅曼死
avatar-avatar
Ivy Wang的天空藍世界
2021/10/15
Thumbnail
寧靜國度-寮國Part4/NongKhiaw View Point
View  Point 在寮國的登山道，一種是由導遊及村導帶著你上山的 另外一種則是自己到達登山口 入口處會有個收費小涼亭 付費後自行攀爬上去 好處是步道有人維護及使用者付費 同時也為當地帶來收入 因為在寮國多數旅行社背後的資方來自歐美國家 最終回饋到當地的是薪酬而非獲利 當然適時引入環保概念並加以
#旅遊#寮國#自助
avatar-avatar
VK科技閱讀時間
2024/12/17
Thumbnail
美股定期定額從國泰世華 CUBE App 輕鬆開始
*合作聲明與警語： 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
#國泰世華#美股#定期定額
avatar-avatar
Cyan Salon
2024/02/18
Thumbnail
《深時遠見（The Long View）》
在這部作品中，作者透過長期的觀察與研究，分析了今日國家社會形成短視習慣的原因和影響，藉此凸顯出長遠眼光的重要性，並且描繪以長遠眼光改變這種狹隘視野的願景，打造出一個永續不息的自然和社會環境。
#閱讀#閱讀心得#閱讀筆記
avatar-avatar
HKT實驗室
2023/12/29
Thumbnail
View Binding 快速入門指南
本課程學習如何使用 View Binding。
#Android教學#Android入門指南
avatar-avatar
LiiMii Here
2023/12/04
Thumbnail
可能包含敏感內容
【HoloEN】🔞The View 【BaeRyS】
……看著那對渾圓酥軟的胸在眼前搖曳，IRyS也忍不住伸手輕撫那為她賣力搖擺的腰際，接著一路沿著腹部，從小肚臍到肋骨，在順著肋骨到胸下緣，沿著緣弧的曲線最後包覆那令人垂延的酥胸，途中不忘戲弄了一下那挺立的花蕊，使得Bae為此而輕顫不已……
#HoloEN#BaeRyS#百合
avatar-avatar
廢話大王的沙龍
2023/12/04
A Room with a View
不會有人看的女權自助餐
#房間#認同#休息
avatar-avatar
Kentzeur（aka 邱胤瑋）的沙龍
2023/07/28
Panoramic view of learning
Sometimes I just want to have fun
avatar-avatar
Mei Wechner的沙龍
2022/05/20
Thumbnail
Cuba helped to vaccinate many people in spite of the US san
Cuba helped to vaccinate many people in spite of the US sanctions. This is another video that was very educational for me:
avatar-avatar
花花說...的沙龍
2021/12/28
Thumbnail
台北信義區｜高樓view咖啡廳｜WIRED TOKYO日式洋食餐廳 ｜TSUTAYA BOOKSTORE 蔦屋書店
市政府這一代平常人來人往，周末想必更是人潮壅擠，我建議平日中午或下午來這部用定位也有位子，雖然有不能說有到人煙稀少，但至少坐在哪啡廳內還是有幾桌空位的，不管你是要讀想看書時光或是打打字寫寫東西，都還能假裝悠閒給假掰一下😄
#信義區#市政府站#捷運美食
avatar-avatar
臉譜出版的沙龍
2021/11/01
Thumbnail
Helter Skelter 惡女羅曼死（蜷川實花同名電影改編原著，隨書贈台灣版獨家限量海
輕蔑自由吧、輕蔑貞節吧、輕蔑希望吧 輕蔑喜悅吧、輕蔑悲劇吧、輕蔑休息吧 輕蔑溫柔吧、輕蔑光芒吧 沒錯，我已經做出了選擇。 最能象徵日本泡沫經濟時代的當代漫畫名家——岡崎京子 封筆前最高傑作！蜷川實花同名電影改編原著！
#漫畫#視覺文學#惡女羅曼死
avatar-avatar
Ivy Wang的天空藍世界
2021/10/15
Thumbnail
寧靜國度-寮國Part4/NongKhiaw View Point
View  Point 在寮國的登山道，一種是由導遊及村導帶著你上山的 另外一種則是自己到達登山口 入口處會有個收費小涼亭 付費後自行攀爬上去 好處是步道有人維護及使用者付費 同時也為當地帶來收入 因為在寮國多數旅行社背後的資方來自歐美國家 最終回饋到當地的是薪酬而非獲利 當然適時引入環保概念並加以
#旅遊#寮國#自助