涡轮增压变形之苦

主要观点: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属性被变形。
阅读 8
0 条评论