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
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
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
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
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
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News