Phoenix LiveView 中的 HTML 属性指南

Phoenix LiveView 中的 HTML 属性指南

phoenix_live_view Rich, real-time user experiences with server-rendered HTML 项目地址: https://gitcode.com/gh_mirrors/ph/phoenix_live_view

概述

Phoenix LiveView 提供了一系列特殊的 HTML 属性，这些属性以 phx- 为前缀，用于实现客户端与服务器之间的实时交互。本文将详细介绍这些属性的用法和功能，帮助开发者更好地构建实时 Web 应用。

事件处理属性

LiveView 的事件处理属性允许开发者定义各种用户交互行为，这些交互可以触发服务器端的回调函数或直接在客户端执行 JavaScript 命令。

点击事件

• phx-click: 处理元素点击事件
• phx-click-away: 处理点击元素外部区域的事件

<button phx-click="increment" phx-value-id="1">增加</button>

焦点事件

• phx-blur: 元素失去焦点时触发
• phx-focus: 元素获得焦点时触发
• phx-window-blur: 窗口失去焦点时触发
• phx-window-focus: 窗口获得焦点时触发

键盘事件

• phx-keydown: 按键按下时触发
• phx-keyup: 按键释放时触发
• phx-window-keydown: 窗口范围内的按键按下事件
• phx-window-keyup: 窗口范围内的按键释放事件

配合 phx-key 属性可以监听特定按键：

<input phx-keydown="key_pressed" phx-key="Enter" />

滚动事件

• phx-viewport-top: 元素到达视口顶部时触发
• phx-viewport-bottom: 元素到达视口底部时触发

表单处理属性

LiveView 为表单交互提供了专门的属性支持：

表单元素属性

• phx-change: 表单字段值变化时触发
• phx-submit: 表单提交时触发
• phx-auto-recover: 控制表单自动恢复行为
• phx-trigger-action: 是否触发常规表单提交

按钮元素属性

• phx-disable-with: 在表单提交期间显示替代文本

<form phx-change="validate" phx-submit="save">
  <input type="text" name="username" phx-debounce="500" />
  <button type="submit" phx-disable-with="保存中...">提交</button>
</form>

连接生命周期属性

这些属性用于处理 WebSocket 连接状态变化：

• phx-connected: 连接建立后执行
• phx-disconnected: 连接断开后执行

<div phx-connected={JS.hide()} phx-disconnected={JS.show()}>
  连接已断开，正在尝试重连...
</div>

DOM 元素生命周期属性

LiveView 提供了对 DOM 元素生命周期的精细控制：

• phx-mounted: 元素挂载后执行
• phx-remove: 元素移除时执行
• phx-update: 控制 DOM 更新行为

<div phx-mounted={JS.transition("fade-in")} phx-remove={JS.transition("fade-out")}>
  动态内容区域
</div>

客户端钩子

phx-hook 属性允许开发者定义客户端 JavaScript 钩子，实现更复杂的交互逻辑：

<div phx-hook="ChatScroll">
  聊天消息内容
</div>

对应的 JavaScript 实现：

let Hooks = {}
Hooks.ChatScroll = {
  mounted() {
    this.el.scrollTop = this.el.scrollHeight
  },
  updated() {
    this.el.scrollTop = this.el.scrollHeight
  }
}

静态资源追踪

phx-track-static 属性用于标记静态资源文件，当这些文件发生变化时，LiveView 会自动刷新页面：

<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />

最佳实践

1. 合理使用 phx-debounce 和 phx-throttle 控制事件频率
2. 对于频繁更新的元素，考虑使用 phx-update="ignore" 避免不必要的 DOM 操作
3. 利用客户端钩子实现复杂的交互逻辑，减少服务器负载
4. 为关键表单元素添加 phx-disable-with 提升用户体验

通过掌握这些 HTML 属性的用法，开发者可以充分发挥 Phoenix LiveView 的实时交互能力，构建高效、响应迅速的 Web 应用。

phoenix_live_view Rich, real-time user experiences with server-rendered HTML 项目地址: https://gitcode.com/gh_mirrors/ph/phoenix_live_view