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中文网其他相关文章！