Redirect_to / Render / Render Partial

更新於 發佈於 閱讀時間約 6 分鐘

在 Rails 裡常常可以看到 redirect_to 跟 render,但這兩者到底有什麼差異呢?


Redirect_to

redirect_to 後面接網址路徑,是用來轉到該網址路徑去,也就是換到一個新的頁面。

redirect_to 'https://www.google.com/'

如果在 new 的頁面上


if xxx.save
(略)
else
redirect_to 'new_xxxx_path'
end

針對 save false 時執行轉址,會導致在 new 頁面上原本填寫好的資料,全部都消失不見。

因為他是從原本的 A 頁轉到新的 A 頁,所以在原本的 A 頁填好的資料理所當然就不見了。

(同一條溪流,這一秒的水流跟下一秒的水流是不一樣的水流)

Render

只要使用 render 就能解決上述的狀況!

Render 是渲染的意思。

也就是說,render 會渲染指定的畫面,渲染的意思就是原封不動的重新呈現,原本有什麼就給你看什麼。

如果我們把 redirect_to 轉址,改成 render 渲染:

if xxx.save
(略)
else
render :new
end

他就會去渲染 new.html.erb,那只要你在 new 的 view template 畫面上有什麼就渲染什麼,輸入在表格上的資料就不會消失了。

因為不像轉址是到一個全新的頁面。

Render Partial

Render partial 稱為局部渲染,是 render 的其他功能,它可以把每個內容重複的 view template html.erb 進行整合,將重複的內容,整理到一份命名規則為 _xxxx.html.erb 的檔案裡(第一個底線必備)。

通常在 Rails 裡,new 跟 edit 的 html.erb 會有一樣的表格:


/views/article/new.html.erb

<h1>新增</h1>

<%= form_for @article do |form| %>
....(略)
<% end %>


/views/article/edit.html.erb

<h1>編輯</h1>

<%= form_for @article do |form| %>
....(略)
<% end %>

我們可以把它們重複的部分(表格),整理到 _form.html.erb 然後讓 new.html.erb 跟 edit.html.erb 去渲染 _form.html.erb:

/views/article/_form.html.erb

<%= form_for @article do |form| %>
....(略)
<% end %>


/views/article/new.html.erb

<h1>新增</h1>

<%= render 'form' %>


/views/article/edit.html.erb

<h1>編輯</h1>

<%= render 'form' %>

如此一來便符合 Ruby 的原則:避免重複。

為何稱為局部渲染?

從上面的範例可以知道,new 跟 edit 並不是把自己所有的畫面都渲染了,而是保留了各自不同的部分:

<h1>新增</h1>


<h1>編輯</h1>

並渲染了局部重複的部分:

<%= form_for @article do |form| %>
....(略)
<% end %>

Render Partial 彈性大增

在 render partial 的功能裡,還能夠替每個需要的 html.erb 進行渲染客製化,增加渲染的彈性。

/controller/articles_controller.rb

def create
@article = Article.new(article_params)
(略)
end


/views/article/_form.html.erb

<%= form_for article do |form| %>
....(略)
<% end %>


/views/article/new.html.erb

<h1>新增</h1>

<%= render 'form', article = @article %>


/views/article/edit.html.erb

<h1>編輯</h1>

<%= render 'form', article = @article %>

將 render 後面多加一個區域變數,並讓實體變數指向該區域變數,用這個實體變數指向區域變數的方法,好讓每個局部渲染的畫面,都能再另外客製化各自需要的東西。

在 class 裡的 action 底下製作需要的實體變數,然後指向區域變數。

留言
avatar-img
留言分享你的想法!
avatar-img
Mike的沙龍
1會員
13內容數
Mike的沙龍的其他內容
2022/08/13
在 Rail 的 MVC 架構中,M 是負責驗證與邏輯、以及轉譯向資料庫溝通的角色; C 是負責資料的搬運,搬往 M 或 V; V 則是負責畫面的呈現、及使用者與資料的互動,並將請求送往C,接著得到 C 送回來的資料。 form_tag form_for form_with
2022/08/13
在 Rail 的 MVC 架構中,M 是負責驗證與邏輯、以及轉譯向資料庫溝通的角色; C 是負責資料的搬運,搬往 M 或 V; V 則是負責畫面的呈現、及使用者與資料的互動,並將請求送往C,接著得到 C 送回來的資料。 form_tag form_for form_with
2022/08/12
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
2022/08/12
將 Rails 環境帶入 rake 裡,讓 rake 可以使用 Rails 的元素,像是 Model: 如果沒有導入環境給 rake ,rake 就找不到 User ,就沒辦法 new 了。 終端機輸入: 透過回圈,一個指令,產生多筆資料: 更複雜的:
2022/08/01
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
2022/08/01
在介紹什麼是樂觀鎖、什麼是悲觀鎖之前,我們先來了解一下,這兩個鎖是應用在什麼地方? 資料庫 為了達成這件萬中選一的情況,就必須使用到「鎖」的概念。 悲觀鎖 從字面上來想,可以很清楚的知道,這個鎖是用悲觀來看待資料的寫入。基於對事件的不信任,所採取的行為。 樂觀鎖
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
Thumbnail
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
jQuery ajax & php example 第一種方式 使用application/x-www-form-urlencoded 第二種方式 使用application/json
Thumbnail
jQuery ajax & php example 第一種方式 使用application/x-www-form-urlencoded 第二種方式 使用application/json
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News