htmx - 如何在 HTMX 中重新加载页面刷新时的所有部分
问题描述
我正在尝试 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 错误。
一切都很棒,我做错了吗?
解决方案
对于整页加载,您需要:
渲染内容服务器端
使用带
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>
推荐阅读
- python - 如何在 numba 编译函数中使用 np.empty;错误消息“所有模板被拒绝”
- android - 使用 Volley 的 POST 请求给出“UnknownHostException”
- laravel - Laravel:一对多多边形关系不会自动更新
- c# - 在 Prism 中,RegisterTypes 在构造函数之前被调用
- vba - 清除过滤器错误的功能 - ShowAllData 失败
- c# - 使用实体框架按日期返回最近 10 天的数据
- matplotlib - 返回 Matplotlib 轴的 Python 函数——如何将它们全部组合在一个图中?
- reactjs - 在反应式表单字段中使用 Meteor.user()
- python - 纯python字节管道
- vue.js - $destroy 函数是否会从缓存中删除 Vue 自定义组件