Spec-Zone.ru › Phoenix Краткое описание специальных атрибутов HTML, используемых в шаблонах Phoenix LiveView. Каждый атрибут связан со своей документацией, где приведены дополнительные сведения.
Обработчики событий
Значениями атрибутов могут быть:
Используйте атрибуты phx-value-*
Используйте phx-debounce и phx-throttle
Клавиатура
Используйте атрибут phx-key, чтобы отслеживать нажатия определённых клавиш.
Пример
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>
lib/hello_web/live/hello_live.html.heex
<form id="my-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>
Жизненный цикл подключения сокета
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
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>
Клиентские хуки
Клиентские хуки обеспечивают двустороннюю связь между клиентом и сервером с помощью 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"}></script>
Атрибут
Значение
phx-no-formatНаличие атрибута (или true) отключает автоматическое форматирование HEEx для блока элемента
phx-no-curly-interpolationНаличие атрибута (или true) отключает интерполяцию {...} внутри элемента, требуя синтаксис <%= ... %>
