渲染_async 2.1.6发布的新增功能介绍

111 阅读4分钟

一些新的变化和错误修复是相当棘手的问题。我想写一篇博文来详细说明我是如何修复它们的。

新版本主要带来了错误的修复:

让我们深入了解每项修复的细节。

使用Turbolinks导航的页面现在会停止投票

如果你以前没有听说过Turbolinks,它是Rails应用程序的一个很好的噱头,使其表现得像一个单页应用程序。例如,当你点击一个链接时,它可以优雅地避免全页面加载。Turbolinks通过获取一个页面,交换其<body> 标签,并将其<head> 与页面上的现有内容合并。这个gem在Rails世界中被广泛采用,当你做rails new my-awesome-app ,它从一开始就配备了Turbolinks gem。

在2.1.6版本之前,如果你使用render_async的轮询功能,render_async不会用Turbolinks处理导航变化。例如,如果你的页面开始轮询,而你点击了一个链接,它就不会停止轮询。 轮询的问题非常糟糕幸运的是,在新的版本中,这个问题已经不存在了!

不再有轮询的问题了,因为现在如果turbolinks:visit 事件发生,我们会调用clearInterval

$(document).one("turbolinks:visit", function () {
  if (typeof _interval === "number") {
    clearInterval(_interval)
    _interval = undefined
  }
})

现在设置了默认的页眉X-Requested-With

如果你正在使用Vanilla JavaScript部分的gem(你的项目中没有jQuery,或者你因为某些原因想要Vanilla JS),每个请求都缺少X-Requested-With 头。这个头是很重要的,并且是由jQuery默认设置的。它是默认设置的,因为一些服务器检查这个头作为预防CSRF攻击的措施。更多关于CSRF攻击和X-Requested-With头部的信息可以在这个伟大的博客文章中找到。

修复这个问题是非常简单和直接的:

request.setRequestHeader("X-Requested-With", "XMLHttpRequest")

事件授权现在可以在切换时发挥作用

如果你想触发render_async的加载,你可以使用任何元素来做到这一点。例如,你想用render_async加载你博客上的评论,你可以这样做:

<!-- app/views/posts/show.html.erb -->

<%= render_async comments_path, toggle: { selector: '#comments-button',
                                          event: :click } do %>
  <a href='#' id='comments-button'>Load comments</a>
<% end %>

如果你没有任何其他取决于该链接点击的事件,上述方法可以正常工作。但是,当一个用户在他的用户界面上尝试切换标签的功能时,问题出现了。他希望当用户在他的应用程序中改变标签时加载内容。切换逻辑中的第event.preventDefault() 行阻止了标签的改变。事件没有委托给标签改变逻辑,标签从未被改变。幸运的是,在新的2.1.6版本中,这种情况不再发生了。

嵌套的参数现在可以用Turbolinks加载了

嵌套参数的问题是ye-ling-aung在他的评论中最后一刻发现的。 嵌套参数不能用Turbolinks加载。如果由于某种原因,你需要将render_async调用嵌套到另一个中,你可以很快做到。问题发生在使用Turbolinks加载页面时。顶层的render_async调用被渲染了,但下面的嵌套调用却没有。这是因为render_async的加载逻辑是在turbolinks:load 事件被触发时触发的。对于顶层(初始)render_async调用来说,在turbolinks:load 上触发加载是可以的。但是,如果你有一个嵌套的调用,它将等待turbolinks:load ,这将不会发生,因为页面已经加载了。

为了让嵌套调用呈现,我添加了一段逻辑,检查文档状态是否为 "完整 "或 "交互":

if (
  document.readyState === "complete" ||
  document.readyState === "interactive"
) {
  // Call render_async rendering logic
}

这样,当初始的render_async调用加载和渲染嵌套调用时,它们肯定会被执行。

最后的想法

修复和运送这些修正是多么令人欣慰啊!我很感谢和高兴每个一直在使用render_async的人都有这些问题。我也希望更多的人能够试用新的版本,如果他们有任何问题,请及时报告

P.S. 如果你喜欢我迄今为止在这个宝石上的工作,并且希望我继续改进和维护它,可以考虑在GitHub上赞助我,或者通过PayPal赞助。