使用 Elixir 語言的全端網頁框架 Phoenix 在今年的 1.7 版本中新增了更多方便的功能,再加上內建用來做畫面互動的 LiveView 寫法逐漸成熟。現在正是開始使用 Phoenix 與 Elixir 的最好時機,這個系列將會從頭開始介紹 Phoenix 框架以及我這兩年使用得到的心得。
簡單的頁面 在開始解釋 LiveView 流程之前,我們要直接實作一個有簡單互動的 LiveView 頁面。 Router 與 Controller-View...
相對於之前做的 Controller-View,LiveView 會一直有一個 process 在維護頁面的狀態,有狀態代表有一個週期循環。 LiveView...
這個章節我們要把原本使用 Controller-View 的感激筆記頁面一步一步的改成 LiveView 版本,並加上一些新功能。 一樣先由 Router 開始...
CoreComponents 源由 從 Phoenix 1.7 以後,Phoenix 的新專案都會產生這個 Component module,並且預設 impo...
Component Phoenix 以 component 來整理或重複使用函式化的 HTML template,目前我們有用到包括 core_componen...
modal 表格 由於 LiveView 可以不需要換掉整個頁面,所以我們可以把新增修改的表格放到 modal,這也成了現在 LiveView 表格常見的做法...
顯示表格 建立 lib/gratitude_web/live/note_live/form_component.ex 並填入: defmodule Gratit...
由於 LiveView 的狀態是在 server 端,所以大部分的 End-to-end 測試都可以直接使用 Elixir 在 LiveViewTest 中進行...
這一回先由畫面開始 修改 在列表每一個 note 右邊加上修改按鈕 <.table id="notes" rows={@notes}&...
刪除 刪除相對簡單很多 在列表加上刪除按鈕 在我們的 index 裡多加一個 action slot <.table id="notes&quo...