javascript - AJAX模板渲染后的PJAX

Question

我有一个使用 jQuery 和 pjax(独立)的应用程序。我们正在尝试尝试看看是否可以使用比 jquery-pjax 更灵活、更小的 npm pjax。

我的一个函数在加载数据后设置div的html，这个html包含我们想要作为pjax链接的链接，例如$('#link-container').html('<a href="/account_detail.html?='+account.id+'" data-pjax >') 。但是，单击此链接会导致整个页面重新加载，而不是 pjax 请求。

有没有办法重新实现pjax？当我尝试 new PJAX({elements:[a[data-pjax]]})在 pjax:success 调用中(当来自项目页面的 DOMReady - https://www.npmjs.org/package/pjax )它使用 pjax...但随后加载资源两次。

也许最好的解决方案是使用 jquery-pjax ($(document).pjax(a[data-pjax] 等)，但我想看看以前是否有人遇到过此类问题。也许这种情况很少见包括 jQuery 和非 jQuery pjax，但似乎任何异步数据查询和 DOM 修改都可能发生这种情况，我只想重新 PJAX。

Answer 1

我正在使用 jquery-pjax，当您使用它或配置错误时 - 它也会刷新页面，因此您遇到了我遇到的问题之一。

无论如何，我不确定它是否能帮助您解决问题，但我建议大家使用带有 Firebug 的 Firefox，并在“控制台”选项卡中单击“坚持”，您通常会在那里发现一些错误可能会有所帮助，并且由于某处的错误可能会导致页面刷新 - 有时您会错过它，因为控制台也在刷新。

我了解到，您在编写时需要确保:

<a href="/account_detail.html?=2" data-pjax>bla</a>

您需要有一个容器 - PJAX 将内容放入其中，例如:

<div id="pjax-container"></div>

最初，您配置 PJAX 来绑定(bind)这些对象:

<script>
  // this is how I define it in jquery-pjax, so adjust it as you use it.
  $(document).pjax('a[data-pjax]', '#pjax-container');
</script>

所以我了解到导致 PJAX 刷新的关键点:

• 我发送了两次 header (后端代码)
• 容器突然从 HTML 正文中删除( div id="pjax-container")，并且当 DOM 丢失时，它没有 放置 HTML 的位置 - 因此它只会刷新页面。
• 当我最初将 a[data-pjax] 与 jQuery 绑定(bind)时，新的 DOM 对象不会自动由 jQuery 重新绑定(bind)(除非使用“live/on”)，因此它们充当常规 <a>标记并使用新 URL 重新加载页面。
• 一些 JS/PJAX 语法错误

就您而言，如果 pjax-container 是“#link-container”，我不确定将标签放在其中是否是个好主意。