Phoenix LiveView 是一個基於 Elixir 建構的強大框架，提供了一種無需大量 JavaScript 即可建立即時 Web 介面的創新方法。
但是，與現有的客戶端庫（例如用於繪圖、可視化或渲染的庫）整合有時可能會是一個挑戰。
在本文中，我們將探討如何將 Phoenix LiveView 與直接渲染到 DOM 的 Javascript 函式庫整合。
我們將遇到鉤子，它允許我們在給定元素的某些生命週期元素上運行Javascript，以及這些鉤子如何啟用事件流（使用 LiveView 中的Push_event 和Javascript 中的pushEvent）允許客戶端和客戶端之間進行雙向即時通訊伺服器。
TLDR：在Phoenix LiveView中，您可以使用hooks和push_event來推送數據，並讓客戶端庫處理渲染。
json-view（演示） - 將網頁上的 JSON 物件顯示為可展開和折疊的樹 - 是一些客戶端 Javascript 庫如何控制對 DOM 的渲染以及與其交互的一個很好的示例.
讓我們透過一個範例來了解如何將其與 (LiveView) 伺服器提供的 JSON 資料整合。我們將從後端發送一些靜態資料來回應事件，但這些資料可以來自任何來源。
以下內容假設您已使用 mix phx.new 設定了 Phoenix 項目，並啟用了 LiveView。
有多種方法可以將 Javascript 套件合併為頁面 Javascript 的一部分。
建議首選設定超出了本文的範圍，但有兩種主要方法：
當我們嘗試組合這兩個函式庫時，存在兩種不相容的渲染模型。
LiveView 遵循 聲明性模型 - 您設計視圖，決定應顯示哪些數據，LiveView 會在底層資料變更時計算出頁面的哪些元素需要變更。
它透過在渲染中使用套接字分配來實現這一點：
def render(assigns) do ~H""" <p>Hello <%= @name %></p> """ end
但是，像 json-view 這樣的函式庫可以在 命令式模型上運作。我們指定在 DOM 本身佈局之外以 Javascript 顯示資料所需的步驟：
import jsonview from '@pgrabovets/json-view';
const data = '{"name": "json-view", "version": "1.0.0"}'
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.tree'));
這兩個模型是不一致的。我們看似沒有辦法匹配兩種渲染資料的方法（聲明式和命令式），但我們需要像 json-view 這樣的函式庫來在客戶端渲染豐富的介面。
從根本上來說 - 當伺服器提示頁面狀態變更時，我們需要執行 Javascript 程式碼。讓我們來看看 hooks，它有助於協調這兩種渲染模型。
在 LiveView 中，hooks 是在（瀏覽器）客戶端和（LiveView）伺服器之間提供雙向通訊的方式，通訊的核心物件是 事件。
鉤子在 LiveSocket 中定義，並使用 phx-hook 屬性附加到元素。有許多回調 - 但我們將重點關注已安裝的回調，因為我們可以透過事件協調其他所有內容。您也可以為其他生命週期事件提供回調 - 查看文件。
在 Mounted 之類的回呼中，鉤子使用 this.pushEvent 將事件傳送到後端，並透過使用 this.handleEvent 為特定事件名稱註冊處理程序來處理來自伺服器的事件。
需要注意的是，每個元素只允許有一個鉤子，因此您只需要推理客戶端和伺服器之間的一個事件流。
記住這些知識 - 讓我們定義一個 JsonView 鉤子來註冊一個事件處理程序，最終調用元素上的 jsonview.render 來渲染資料樹。
import { Socket } from 'phoenix';
import jsonview from '@pgrabovets/json-view';
const JsonViewHook = {
mounted() {
this.handleEvent("render_json", ({ data }) => {
this.el.innerHTML = "";
const tree = jsonview.create(data);
jsonview.render(tree, this.el);
});
}
}
const liveSocket = new LiveSocket(
"/live",
Socket,
{hooks: { JsonView: JsonViewHook }, ...}
);
...
我們在這幾行程式碼中做了幾件事：
要使用此鉤子 - 我們只需將帶有鉤子名稱（“JsonView”）的 phx-hook 屬性添加到元素中：
<div>
<h2>
Sending events to the server
</h2>
<p>We’ll just need to trigger an event from the backend to provide this data. We’ll leave this outside the scope of this article for now - perhaps a button could trigger an event to the backend? - but you could use this.pushEvent from the mounted hook like so:<br>
</p>
<pre class="brush:php;toolbar:false">mounted() {
this.pushEvent("send_json", {});
}
將事件傳送到可以使用handle_info處理的LiveView伺服器。 LiveView 文件的相關部分涵蓋了 this.pushEvent 的更多可能性，包括可以指定處理函數直接處理回覆有效負載的場景。
push_event/3 是將事件從 LiveView 推送到瀏覽器的方式。它可以在任何時候調用 - 包括在掛載時 - 儘管一個好的做法是在發送這些事件之前確保頁面及其所有元素處於已知狀態。否則 - 您將在頁面設定期間默默地刪除事件 - 這是導致不可預測性的必然途徑！
讓我們為可能從客戶端收到的事件編寫一個handle_event 子句，它將事件推送到客戶端：
def render(assigns) do ~H""" <p>Hello <%= @name %></p> """ end
就是這樣！這裡也有彈性。在客戶端和伺服器上使用名稱註冊事件處理程序標誌著事件處理和事件引發方式之間的明確分離。
我們已經看到了客戶端和伺服器之間整合的一個簡單範例。對此的常見擴充是透過使用事件參數和元素屬性來將某些更新範圍限製到某些元素。這有助於減少不必要的事件和處理程序工作量。
還可以擴展此事件處理，以實現客戶端庫與後端更緊密的整合。例如，通常這些 Javascript 程式庫會發出更高層級的使用者互動事件。我們的函式庫範例 json-view 不會執行此操作，但像 Chart.js 這樣的圖表庫會執行此操作。
但是，從使用者互動的角度來看，通常應該避免往返伺服器進行處理。通常，任何基於事件的渲染更新都將由渲染庫客戶端處理。
但是出於其他原因捕獲用戶活動是一個常見的用例。這包括監控、記錄和分析。這些不需要回應，因此鉤子內的 PushEvent 非常適合伺服器上的此類非同步處理。
整合需要控制 DOM 的強大 Javascript 用戶端程式庫是建立豐富的動態使用者介面的關鍵部分。並非所有頁面更新都需要即時，因此保留 LiveView 提供了一種強大且簡單的方法來繼續控制其他頁面狀態。
熟悉 LiveView 掛鉤及其相關事件使得將它們與源自伺服器的資料整合成為可能。同樣重要的是要注意，並非所有使用者互動都需要往返伺服器，並且當您使用強大的 Javascript 庫時，您建立的介面將更加靈活且響應更快。
以上是Phoenix LiveView、鉤子和push_event：json_view的詳細內容。更多資訊請關注PHP中文網其他相關文章！
