Turbo Streams 是如何運作的（幕後）

本文原刊於 Rails Designer

---

Turbo Streams 可讓您根據 Web 要求（控制器操作）更新應用程式的特定部分，簡稱為 Turbo Streams。或作為 Turbo Stream 廣播，當後端（在模型建立、更新或銷毀或從任何物件手動）透過 Websocket（通常透過 ActionCable）觸發時。

雖然來源不同，但兩者的反應 (HTML) 是相同的。我想快速解釋 Turbo Streams 的工作原理，以便您了解，就像 Rails 一樣，不涉及任何魔法??。只是普通的舊 JavaScript！

要廣播 Turbo Stream，您可以執行以下操作：

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

對於控制器操作（或在控制器中內聯，如果這是您的難題）：

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

那麼這兩個選項所發送的回應 (HTML) 是什麼？

<turbo-stream action="append" target="resources">
  <template>
    <!-- HTML content of the Resource -->
  </template>
</turbo-stream>

這看起來非常像您為控制器操作所建立的 Turbo Stream 回應！唯一大的差異是包裹在 HTML 中的 template 元素（來自局部元件或 ViewComponent）。 template 元素是用來保存隱藏 HTML 內容的容器。

？您可以在瀏覽器的開發工具中看到類似的回應。

一旦turbo流元素被注入到DOM中，Turbo就會接管。 Turbo-stream只不過是一個自訂元素。它在這裡定義。你可以看到它又定義了一個connectedCallback()函數。每次將元素新增至文件時都會呼叫該函數；這是自訂元素的功能。

那麼接下來會發生什麼事？讓我們逐步討論最重要的部分。振作起來！ ?️?

1. 調度一個自訂事件 beforeRenderEvent；
2. 該事件呼叫 renderElement 函數；
3. 然後呼叫performAction；
4. 然後呼叫定義的操作。

在最後一個檔案中，您可以看到 Turbo Stream 所有支援的預設操作（追加、前置、替換等）。如果您熟悉 JavaScript，即使只有一點點，您應該能夠輕鬆掌握每個單獨操作的作用（如果不熟悉，請查看 JavaScript for Rails Developers？）。本質上，除了 remove 操作；從 template 元素中獲取 HTML 並將其添加到 DOM（基於操作；追加、前置、之後等）。

有了這些知識，您可能會發現您只需手動插入自訂 Turbo-stream 元素，Turbo 就會知道如何拾取它。

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

只需複製上面的 HTML 並在瀏覽器中查看即可。您將看到 li 元素被附加到 ul 元素。 ？然後使用瀏覽器的開發工具，將另一個 Turbo-stream 元素 任意位置 貼到 DOM 中：

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

很酷，對吧？ Turbo 使用瀏覽器的許多功能來提供我們都喜歡的流暢的開發人員體驗。現在您知道 Turbo Stream 在幕後是如何運作的！

以上是Turbo Streams 是如何運作的（幕後）的詳細內容。更多資訊請關注PHP中文網其他相關文章！