首页 >web前端 >js教程 >Turbo Streams 是如何工作的(幕后)

Turbo Streams 是如何工作的(幕后)

Linda Hamilton
Linda Hamilton原创
2024-10-22 23:40:29830浏览

本文最初发表于 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 内容的容器。

?您可以在浏览器的开发工具中看到类似的响应。

How do Turbo Streams Work (behind the scenes)

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn