主要观点:Turbo 8 引入了页面刷新与变形的概念,虽强大但不应全局启用,否则可能导致 JavaScript 代码出现问题,文中通过多个示例展示了常见陷阱及解决方法。
关键信息:
- 展示了在 Rails 应用中启用 Turbo 变形后出现的问题,如编辑器工具栏消失、文本区域失去交互性等,原因是变形替换元素时丢失了 JavaScript 状态。
- 介绍了通过添加
data-turbo-permanent
属性来选择特定元素不进行变形,以及在表单提交成功后重置表单的方法来解决问题。 - 提及在实现实时更新列表和可折叠评论功能时,因模型广播页面刷新导致细节元素重新打开的问题,并通过创建 Stimulus 控制器来防止
details
元素的open
属性被变形。
重要细节: - 在 Rails 应用的
comments/index.html.erb
视图中,根据评论是否为空显示不同内容,且有创建新评论的表单。 - 在
comments_controller.rb
控制器中,创建评论的动作很简单,提交表单后服务器会重新渲染index
视图。 - 在应用布局中添加
turbo_refreshes_with method: :morph, scroll: :preserve
来启用 Turbo 变形。 - 在
app/javascript/controllers/form_controller.js
中创建了用于重置表单的 Stimulus 控制器。 - 在
app/models/comment.rb
中添加broadcasts_refreshes
来广播模型的刷新。 - 在
app/views/comments/_comment.html.erb
中通过turbo_stream_from
来进行 Turbo 流的操作,实现实时更新和可折叠功能。 - 在
details
元素中使用data-controller="details" data-action="turbo:before-morph-attribute->details#preventToggle"
来防止open
属性被变形。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。