如何在 HTMX 中重新加载页面刷新时的所有部分

Posted

技术标签:

【中文标题】如何在 HTMX 中重新加载页面刷新时的所有部分【英文标题】:how to reload all partials on page refresh in HTMX 【发布时间】:2021-12-05 08:31:04 【问题描述】:

我正在试用 HTMX 库,到目前为止我非常喜欢它。我无法完全理解的是处理整页重新加载。

链接

<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerhtml" hx-push-url="/#/feed">Feed</a>


<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>

它非常棒,因为它将内容加载到我需要的 div 中,并将 /#/link 应用到我的 url 栏和浏览器历史记录中。

但是当我在任何 url /#/profile 或 /#/feed 上重新加载页面时,页面会重新加载到其默认状态,不包括 /#/profile 或 /#/feed 页面上指定的内容。

如果我只使用 /profile 或 /feed 的 url,我会得到预期的 404 错误。

一切都很棒,我做错了吗?

【问题讨论】:

【参考方案1】:

对于整页加载,您需要:

    渲染内容服务器端

    使用带有load 触发器的htmx 在页面加载时加载内容。你可以在这里找到一个例子https://htmx.org/attributes/hx-trigger/

在第二种情况下,您仍然需要能够确定服务器端正在加载的页面类型以呈现适当的 div。像这样的:

 <div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>

【讨论】:

以上是关于如何在 HTMX 中重新加载页面刷新时的所有部分的主要内容,如果未能解决你的问题,请参考以下文章

PhoneGap如何使用一页应用刷新/重新加载页面

ServiceWorker 如何通过向所有订阅者推送来触发刷新/重新加载?

如何让js在页面加载后只执行一次,也就是再次刷新当前页,不再执行js

使用 AJAX 刷新 Rails 部分时的未定义方法

单页应用及多页应用

如何刷新另一个页面内的页面?