主要观点:通过使用 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
和广播通道的方法、刷新方法等,在视图中使用相关方法进行更新和显示。- 后台任务发送介绍邮件时,根据状态更新组件并进行相应的刷新操作。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。