查看源代码 phx- HTML 属性

Phoenix LiveView 模板中使用的特殊 HTML 属性摘要。每个属性都链接到其文档以获取更多详细信息。

事件处理程序

属性值可以是

使用 phx-value-* 属性将参数传递给服务器。

使用 phx-debounce 和 phx-throttle 来控制事件的频率。

点击

属性
phx-click phx-click-away

焦点

属性
phx-blur phx-focus
phx-window-blur phx-window-focus

键盘

属性
phx-keydown phx-keyup
phx-window-keydown phx-window-keyup

使用 phx-key 属性监听特定按键。

滚动

属性
phx-viewport-top phx-viewport-bottom

示例

lib/hello_web/live/hello_live.html.heex

<button type="button" phx-click="click" phx-value-user={@current_user.id}>Click Me</button>
<button type="button" phx-click={JS.toggle(to: "#example")}>Toggle</button>

表单事件处理程序

在 <form> 元素上

属性值
phx-change事件名称或 JS 命令
phx-submit事件名称或 JS 命令
phx-auto-recover事件名称，JS 命令 或 "ignore"
phx-trigger-actiontrue 或 false

在 <button> 元素上

属性值
phx-disable-with事件提交期间显示的文本

在容器元素上

LiveView 在用户交互之前应用 phx-no-feedback CSS 类。

属性值
phx-feedback-for表单字段或组名称
phx-feedback-group用于识别字段组的任意字符串

表单示例

lib/hello_web/live/hello_live.html.heex

<form phx-change="validate" phx-submit="save">
  <input type="text" name="name" phx-debounce="500" phx-throttle="500" />
  <button type="submit" phx-disable-with="Saving...">Save</button>
</form>

套接字连接生命周期

属性值
phx-connectedJS 命令 在 LiveSocket 连接后执行
phx-disconnectedJS 命令 在 LiveSocket 断开连接后执行

lib/hello_web/live/hello_live.html.heex

<div id="status" class="hidden" phx-disconnected={JS.show()} phx-connected={JS.hide()}>
  Attempting to reconnect...
</div>

DOM 元素生命周期

属性值
phx-mountedJS 命令 在元素装载后执行
phx-removeJS 命令 在元素移除期间执行
phx-update"replace" (默认)，"stream" 或 "ignore"，配置 DOM 修补行为

lib/hello_web/live/hello_live.html.heex

<div
  id="iframe-container"
  phx-mounted={JS.transition("animate-bounce", time: 2000)}
  phx-remove={JS.hide(transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"})}
>
  <button type="button" phx-click={JS.exec("phx-remove", to: "#iframe-container")}>Hide</button>
  <iframe id="iframe" src="https://example.com" phx-update="ignore"></iframe>
</div>

客户端钩子

属性值
phx-hook在 LiveSocket 中预先定义的 JavaScript 钩子的名称

客户端钩子使用 this.pushEvent 和 this.handleEvent 提供客户端和服务器之间的双向通信，用于发送和接收事件。

lib/hello_web/live/hello_live.html.heex

<div id="example" phx-hook="Example">
  <h1>Events</h1>
  <ul id="example-events"></ul>
</div>

assets/js/app.js

let Hooks = {}
Hooks.Example = {
  // Callbacks
  mounted()      { this.appendEvent("Mounted") },
  beforeUpdate() { this.appendEvent("Before Update") },
  updated()      { this.appendEvent("Updated") },
  destroyed()    { this.appendEvent("Destroyed") },
  disconnected() { this.appendEvent("Disconnected") },
  reconnected()  { this.appendEvent("Reconnected") },

  // Custom Helper
  appendEvent(name) {
    console.log(name)
    let li = document.createElement("li")
    li.innerText = name
    this.el.querySelector("#example-events").appendChild(li)
  }
}

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks})

跟踪静态资产

属性值
phx-track-static无，用于注释静态文件

lib/hello_web/components/layouts/root.html.heex

<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>