× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》


Rails redirect_to 到分頁中的某一頁


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • 真不該直接用 JavaScript...
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2018/07/11
14   0  


我想大部分的網頁都還是有做分頁的,雖然無分頁(Pageless)是目前的趨勢,但是分頁還是有分頁的UX設計好處,特別是文章類的網站。

只要是有做分頁的網站,都會碰到一個問題,要如何 redirect_to 跳到指定的項目那一頁,比如,部落格網站顯示文章,一般一頁是 25~30 個文章標題,用分頁顯示,但是,當我們要跳到指定的那一個文章顯示頁時,我們就會遇到不知道第幾頁的問題。 其實問題也不難解,最主要的就是讓後台程式找,再跳到在那一頁,以下也算是我自己的紀錄,希望對喜愛 rails 的工程師有幫助:

一,link_to params 你要去的地方:

我們不知道要去的地方是在那一頁,但是我們一定知道要去的地方是什麼,以上面的部落格網站為例,我們一定會知道要去的文章 id ,所以最簡單的辦法就是將這個 id 放入 link_to 的 params 裡面,別忘了給 params 取個好名:

link_to( "帶我去文章頁", blogs_path(id: @user, go_to_blog_id: blog.id.to_s) )

二,在controller 中找到它在那一頁:

繼續用上面的例子,當 link_to 指到了 blog 的 index action 後,我們來用已經知道的 blog id 找它在那一頁,以下就是參考程式碼,我這裡用的是一般大家最常用的 Kaminari gem

blog_pre = Blog.order(:created_at)
@blog = blog_pre.paginate(page: params[:page])
# 找到這個 blog id 在那裡。
# 一定要沒有指定頁面及有指定轉頁,才會執行這轉頁動作
if ( !params.has_key?(:page) && params.has_key?(:go_to_blog_id) )
x_offset = blog_pre.pluck(:id).index(params[:go_to_blog_id].to_i)
  # Kaminar有很多內建查詢功能,.per_page 可以知道一頁有幾個,還有很多其他,可以到它的 Github 看看。
x_page = x_offset / @blog.per_page + 1
x_anchor = "anchor-"+params[:go_to_blog_id].to_s
redirect_to blogs_path(id: @blog, :page => x_page.to_s, anchor: x_anchor)
return
end
最後,

別忘了在你的 views 網頁上,加上 id 或是 name 的anchor 點,這樣就不止可以轉到那ㄧ頁,還可以停在那個指定的文章上!

基本上,這樣就完成了,很簡單吧,但是如果你也寫了最後的anchor 點,也發現程式很乖的跳到指定頁後,就是不會跳到你所指定的 anchor 點,這個問題有一定的難度了,基本上,這是一個 redirect_to 的定義問題:

301 redirect 不執行 anchor 動作嗎?

redirect 301 按規定本來就不會跳,按規定,在 301 時,瀏覽器就不會執行任何網址在 hash 後面的東東,我也是因為這不會跳事件才剛學到的,當瀏覽器遇到 301 要求時,會把你指定的在 # 後的 anchor 拿掉,跟後台資料後,再將 anchor 加回你的網址列, 你根本就看不出來有那裡不對,只會覺得就是不跳,遇到鬼了,還好,此路不通,還是有路,解決的方法有以下幾種:

  1. 就用 javascript 吧:我知道說這樣的解法一定馬上很多人笑,這麼爛的解法,但是我覺得這是最簡的的解法,而且還可以帶出一些效果,是很爛的解法,但是簡單一直是我最喜愛的。
  2. 改用post 303:知道我不喜歡用這個方法的原因了吧,這樣的改法要改變Http verb,也就是說,如果如前例,本來的 index get 要改成 post,還要將 redirect_to 的 code 設成 303,好怪啊,我不喜歡,這種寫法以後要維護一定很慘,說實話,會不會動我也不知道,理論上應該會動啦,但是我連試都不想試。

很多人遇到這 anchor 不轉跳問題時,都會賴到 turbolinks,但是很快會發現,turbolinks 關掉後也沒用,不過,turbolinks 真的有把問體更「討厭化」,turbolinks 在 redirect_to 時,如果發現是 get action,就不會清 turbolinks 的 cache,我也是花了好久才知道這,也就是說,你如果不是用 javascript,你一樣要改用 non-get 的動詞,網頁才會跳到指定的 anchor,這真不是我喜歡的解法。

希望對大家有幫助。

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: 303 post redirect x 1 301 redirect x 1 redirect_to 到指定頁 x 1 kaminari x 1 rails x 29

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入