我们如何在 LiveView + LiveSvelte 中构建表单

主要观点:介绍了 Sequin 这一 Postgres CDC 工具,其 web 控制台由 LiveView + LiveSvelte 构建,分享了使用该栈的设计模式,重点关注表单编写。
关键信息

  • 每个 Ecto 模型对应一个Form模块,可能是 LiveComponent 或 LiveView。
  • DatabasesLive.Form LiveView 处理数据库表单,根据创建或更新设置初始状态和更改集。
  • 用 JSON 与 Svelte 表单组件通信,编码/解码结构体,定义默认值。
  • Svelte 表单组件通过live.pushEvent与 LiveView 交互,有form_updatedform_submitted等事件处理。
  • LiveView 事件处理函数处理前端发送的事件,进行数据处理和路由。
  • 利用 LiveView 进行路由,Svelte 用data-phx-link/data-phx-link-state导航。
    重要细节
  • mount/3中根据id判断是创建还是更新来初始化状态。
  • put_changesets根据is_edit?切换更改集函数。
  • encode_database编码数据库结构体。
  • Svelte 组件初始化form对象,通过bind:value绑定输入。
  • decode_params用于反序列化前端事件 payload。
  • handle_event处理各种事件,如form_updated更新更改集,form_submitted进行提交处理。
  • 路由在 LiveView 中处理,Svelte 通过事件通知 LiveView 关闭表单等。
  • 对于 Supabase 连接转换,后端处理并发送回复。
  • 团队感觉使用 LiveView/LiveSvelte 组合生产力高,但仍在探索边界和代码分配。
阅读 13
0 条评论