[Stimulus] 搜尋列表頁面

需求

陳漢庭
Jan 15, 2021

普通的搜尋列表畫面方法為get,意即將request的資訊全部寫在網址列上。不論是分頁還是搜尋,都是透過將資訊寫在網址列上,讓後端讀取後畫面回傳資訊。

然而目前的需求為商品代碼 需求端欲填900筆以上的資訊,而大量的資料無法使用get做為請求,因此較大量的資料,只能用post來判斷。這邊有個比較難應付的地方,就是分頁,分頁的部分由於使用套件,要改變方法沒有這麼容易,因此我們會使用別的策略。

實作

原始碼1. 寫在 form.html.erb 下面的 javascript

這段程式碼主要目的為在使用get方式時保持原本的功能,若轉為post方法則使用stimulus進行控制。stimulus 主要使用data屬性控制,所以上述的方法會在post方法加入關鍵的屬性,變為get 再除去屬性使其恢復原來的功能。

其控制的DOM如下 ⬇️。

在<form> 的地方,也就是 <%= simple_form_for … => 的位置中,掛了名為formtarget ,以及action 用來回傳 product_search_controller 裡頭的成功與失敗響應。data-controller , data-remote=true 兩種屬性上述的原始碼1 進行控制。

我們會將post結果放在targetdisplay的地方,其呈現的結果如下,接下來我們只要在觸發post的時候,把get的資料藏起來就可以了。

⬇️ 下圖的上半部為 post(內容涉及機密因此遮住),而下半部為原本 get 取得的資料。post 的資料經由 stimulus 渲染 html.erb 模板。

分頁

上面 post 渲染的畫面中,右下角的分頁點了會出現異常。會出現異常的原因為該分頁原本為提供get方法使用,但搜尋表單的送出方式為post,因此我們要重新改造專為post設計的分頁。

post 如何實作分頁?基本上市面上的套件裡面,分頁的打法都為get,若要做表單送出的話,分頁要自己做,並且每一次輸入分頁就要送出一次表單,不然的話就要先選分頁,再將滾輪滾到上面按下查詢[表單送出]。由於分頁功能再從上一間離職時來不及做完,等有空的話再把內容補上 😜

參考資料

--

--

陳漢庭
陳漢庭

Written by 陳漢庭

由於零散的紀錄過了一段時間之後就看不懂了,於是為了強迫自己用故事的方式記錄學到的東西,就開啟我的發文之路。

No responses yet