热丝组件会自我刷新

主要观点:通过使用 ViewComponent 等工具,将 Hotwire 应用中的部分 UI 封装在组件中,包含业务逻辑,能带来诸多好处,如简化更新操作、便于重构等。
关键信息:

  • 传统使用 turbo_streams 配合局部视图(partials)更新 UI 存在问题,如需要匹配 dom_id 等,代码搜索困难。
  • 提出新的模式,创建组件(如 UI::UserCard),在后端操作时使用 turbo_stream.replace 并传递组件对象,组件可封装实现细节。
  • 组件可负责自身内容的刷新,如通过 broadcast_refresh! 方法,且可在不同地方调用,如后台任务、模型等。
  • 可引入状态(如 sending_email?)来控制更新时机和显示状态。
    重要细节:
  • 在背景任务或模型中更新部分 UI 时,通常使用 Turbo::StreamsChannel.broadcast_replace_to 并指定 id、局部视图和数据。
  • 可以创建如 user_card_id 这样的辅助方法来获取组件的 id
  • UI::UserCard 组件包含初始化方法、获取 id 和广播通道的方法、刷新方法等,在视图中使用相关方法进行更新和显示。
  • 后台任务发送介绍邮件时,根据状态更新组件并进行相应的刷新操作。
阅读 8
0 条评论