htmx 是 intercooler.js 的后继者，用于使用 http 命令扩展 html，而无需编写 api。现在，我知道一开始我说我要删除抽象层，但是我更多的是系统/工具程序员，所以我仍然需要一些抽象，直到我掌握了底层实际发生的情况。
基本概念
htmx 部署 ajax 命令来修改元素。这与 reactjs 的工作原理类似。 reactjs 允许更新内容，而 htmx 则满足了 html 的要求。
导入htmx
在 ./internal/views/layout.templ
元素中添加了一个简单的衬垫。<script src="%E2%80%9C" https: intirtity="“" sha384-y7hw phpcn> <p>这已包含在存储库中，但已更新以验证脚本。 <h2> 使用htmx <p>htmx 附带所有您最喜欢的关键字，并附加 hx-。<br> <pre class="brush:php;toolbar:false;"># general format is hx-[verb] hx-get # http get hx-post # http post hx-put # http put hx-patch # http patch hx-delete # http delete hx-swap # update content of an element hx-target # specify element to affect hx-trigger # action that executes function </pre> <p>还有更多，但这些是本项目中使用的主要内容。 <p>为了进行简单测试，在 ./internal/views/components/logo.templ 中，在 <img alt="Adding HTMX to GO" > 标签内，我们将添加 hx-get="/" 和 hx-trigger="click"。 <p>打开终端并运行：<br> <pre class="brush:php;toolbar:false;">templ generate go run ./cmd/server/main.go </pre> <p>现在转到您的浏览器并转到 localhost:[您的端口]/。单击 gopher，您应该会看到...好吧，它发生得太快了，您可能没有注意到。没关系。打开开发者工具，然后转到检查器选项卡。再次单击地鼠。您应该注意到检查器选项卡中 html 的更新。 <h2> hx交换 <p>这是 htmx 的面包和黄油。这就是我们正在寻找的响应式 ui/ux 的原因。现在，hx-swap 虽然名称很简单，但需要仔细考虑它的位置。我的意思是，不要把它放在会干扰其他元素的地方。<br> 示例：<br> <pre class="brush:php;toolbar:false;"><div > // container <button hx-delete="[endpoint]" hx-target="nearest [element]" hx-swap="outerhtml" hx-get="[endpoint]" hx-target="this"> // actor </button> // end actor </div // end-container </pre> <p>将所有控件放在按钮上，将导致所有内容被擦除并阻止按钮更新、显示。但是，如果我们将一些工作移至容器中：<br> <pre class="brush:php;toolbar:false;"><div hx-get="[endpoint]" hx-target="this"> // container <li> <button hx-delete="[endpoint]" hx-target="nearest [element]" hx-swap="outerHTML"> // actor </button> // end actor </li> </div // end-container </pre> <p>现在，当我们单击按钮时，只会更改容器内部的数据，除了现在存在用于进一步编辑的按钮。 <h2> 附录 <p>我在这里停下来有两 (2) 个原因。<br> 首先，您可以使用 htmx 并按原样自定义您的网站。其次，我们可以使用 http.reponse 返回 html 代码。通过扩展，我们也可以传递 templ 组件。你知道这是怎么回事吗？ <h2> 即将推出 <p>整个重组并将功能转移到 go handlerfunc() 中。 <p><img src="https://img.php.cn/upload/article/001/246/273/172756801985788.jpg" alt="Adding HTMX to GO" /> </script>
