r3f.cn
GitHub Repo stars

HTMX

一个现代、简约的 JavaScript 库，它允许您使用 HTML 属性来创建动态的 Web 界面。

#开始使用

#CDN 导入

<script src="https://unpkg.com/htmx.org@1.9.2"></script>

#基本用法

<button
  hx-get="/hello"
  hx-target="#result">
  打个招呼
</button>
<div id="result"></div>

#服务器响应

<!-- /hello 响应 -->
<p>来自服务器的问候</p>

#核心属性

#hx-get, hx-post 等

<a hx-get="/page">加载页面</a>
<form hx-post="/submit"></form>

#hx-target

<button hx-get="/data" hx-target="#box"></button>
<div id="box"></div>

#hx-trigger

<input
  hx-get="/search"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#results" />

#Swap（交换）与 Out of Band（带外）

#hx-swap

<div
  hx-get="/frag"
  hx-swap="innerHTML">
</div>
  • outerHTML
  • innerHTML
  • beforebegin, afterbegin 等

#hx-swap-oob

<div hx-swap-oob="true" id="msg"></div>

适用于通过局部视图进行全局更新。

#Swap 修饰符

hx-swap="outerHTML transition:true swap:1s"

#表单与事件

#提交时自动 POST

<form hx-post="/submit" hx-target="#status">
  <input name="name" />
  <button type="submit">发送</button>
</form>
<div id="status"></div>

#hx-include

<input id="user-id" name="id" />
<button
  hx-post="/update"
  hx-include="#user-id">
  更新
</button>

#hx-vals

<button
  hx-post="/save"
  hx-vals='{"id": 42, "active": true}'>
  保存
</button>

#高级功能

#加载指示器

<button
  hx-get="/load"
  hx-indicator="#spinner">
  加载
</button>
<div id="spinner" class="htmx-indicator">加载中...</div>

#hx-push-url

<a hx-get="/page" hx-push-url="true">前往</a>

#轮询

<div hx-get="/time" hx-trigger="every 5s"></div>

#事件与扩展

#监听事件

document.body.addEventListener('htmx:afterSwap', e => {
  console.log("交换完成");
});

#事件钩子

  • htmx:beforeRequest
  • htmx:afterSwap
  • htmx:responseError

#扩展

<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
<form hx-post="/api" hx-ext="json-enc"></form>

#示例用例

#Python 后端 (Flask)

@app.route("/hello")
def hello():
    return "<p>你好，HTMX！</p>"

#HTML 客户端

<button
  hx-get="/hello"
  hx-target="#msg">
  点击
</button>
<div id="msg"></div>