使用变形实现平滑的页面刷新

Turbo Drive 通过避免进行全页重新加载来加快导航速度。但在一种情况下，Turbo 可以进一步提升保真度：重新加载当前页面（页面刷新）。

页面刷新的典型场景是提交表单并被重定向回来。在这种情况下，如果仅更新更改的内容而不是替换页面的 <body>，则感觉会得到显著改善。Turbo 可以使用变形和滚动保留功能代表你执行此操作。

﹟ 变形

你可以使用页面头部中的 <meta name="turbo-refresh-method"> 配置 Turbo 处理页面刷新方式。

<head>
  ...
  <meta name="turbo-refresh-method" content="morph">
</head>

可能的值为 morph 或 replace（默认）。当值为 morph 时，当页面刷新发生时，Turbo 不会替换页面的 <body> 内容，而只更新已更改的 DOM 元素，保持其余部分不变。此方法可提供更好的感觉，因为它保留了屏幕状态。

在底层，Turbo 使用了出色的 idiomorph 库。

你可以使用页面头部中的 <meta name="turbo-refresh-scroll"> 配置 Turbo 处理滚动方式。

<head>
  ...
  <meta name="turbo-refresh-scroll" content="preserve">
</head>

可能的值为 preserve 或 reset（默认）。当值为 preserve 时，当页面刷新发生时，Turbo 将保留页面的垂直和水平滚动。

有时，你希望在变形时忽略某些元素。例如，你可能有一个弹出窗口，希望在页面刷新时保持打开状态。你可以使用 data-turbo-permanent 标记此类元素，Turbo 将不会尝试变形它们。

<div data-turbo-permanent>...</div>

你可以使用 turbo 框架在屏幕中定义区域，当页面刷新发生时，这些区域将使用变形重新加载。为此，你必须使用 refresh="morph" 标记这些框架。

<turbo-frame id="my-frame" refresh="morph">
  ...
</turbo-frame>

借助此机制，您可以加载初始页面加载中未加载的其他内容（例如分页）。当页面刷新时，Turbo 不会移除框架内容；相反，它将重新加载 Turbo 框架，并通过变形呈现其内容。

有一个新的 Turbo 流操作，称为 refresh，它将触发页面刷新

<turbo-stream action="refresh"></turbo-stream>

服务器端框架可以利用这些流来提供一个简单但功能强大的广播模型：服务器广播一个单一的通用信号，页面通过变形平滑刷新。

您可以查看 turbo-rails gem 如何为 Rails 执行此操作

# In the model
class Calendar < ApplicationRecord
  broadcasts_refreshes
end

# View
turbo_stream_from @calendar