在这篇博文中,我们将解释所有的新功能以及它们是如何在最新的2.1.7版本中出现的。
嘿,感谢你阅读新版本的内容,我真的很感谢你在我们进入细节之前,我想提一下,我创建了一个render_async Discord服务器。 请加入我们,我们才刚刚开始!让我们把这个宝石变得更好。让我们把这个宝石变得更好。
新版本有几个新功能,你可以试试:
- 一段时间后重试render_async请求
- 通过调度事件来控制轮询
- 自定义content_for名称
另外,我们的README也有了全新的亮点✨
让我们来看看所有的新功能和如何使用它们。
等待一下,然后重试
之前,我们添加了一个功能,你可以告诉render_async在请求失败时重试。这是很直接的。你所需要做的就是指定你想要的重试次数。如果请求在尝试三次后仍未成功,render_async将停止重试。
重试对于一些 "不稳定 "的端点很有用,这意味着它们有时会返回成功的响应,有时会失败。要做到这一点,你可以写如下:
<%= render_async users_path, retry_count: 5 %>
通过设置retry_count ,我们是在告诉render_async应该向我们的users_path ,重试多少次请求。但是,对于某些人来说,在请求之间有一些延迟可能是有用的。例如,也许你试图到达的服务器已经人满为患了,它可能需要从不断的请求中休息一下。不管是什么原因,你现在可以像这样设置一个retry_delay :
<%= render_async users_path,
retry_count: 5,
retry_delay: 2000 %>
在render_async向服务器发出另一个请求之前,我们要给服务器2秒钟的休息时间。重试的逻辑将保持不变,这意味着render_async将在第5次尝试后退出重试。
我很高兴听到你对这一功能的体验!考虑加入render_async的Discord服务器,并迅速得到回应吧
嘿,你,停下来,好的,现在开始
通过render_async ,你可以轻松地进行HTML轮询,而无需编写JavaScript。你可以通过在你的视图中这样写来实现:
<%= render_async comments_path, interval: 5000 %>
render_async就会每隔5秒向comments_path 发送一个请求。这一切都很好,但你到底是如何停止它的呢?我很高兴你问了这个问题。 以前,你可以通过与页面上的某个元素互动来控制轮询,比如一个可以停止和开始轮询的链接。要做到这一点,你可以做这样的事情:
<a href='#' id='comments-button'>Load comments</a>
<%= render_async comments_path,
toggle: { selector: '#comments-button', event: :click },
interval: 2000 %>
"加载评论 "按钮将作为一个开关,如果你愿意的话,就是切换。你需要做的是向render_async指定什么是toggle。你可以通过传递一个toggle选项对象来做到这一点,该对象带有selector ,即元素的ID,以及event ,例如,如果该元素是一个按钮,则为'click'。
在我们的例子中,每当用户点击 "加载评论 "按钮时,如果开始的话,轮询就会停止,如果停止的话,轮询就会开始。 如果你想的话,你可以利用render_async在每次请求后分派的事件来改变链接的副本,但这是另一篇文章的故事。 考虑加入通讯以尽快获得新文章。
停止,但要有事件
我们描述了关于如何控制轮询的一种方法。新版本增加了通过调度事件来控制轮询的能力。换句话说,render_async现在会监听:
- 'async-stop', 和
- async-start "事件。
你所需要做的就是以下几点:
<%= render_async comments_path,
container_id: 'controllable-interval', # set container_id so we can get it later easily
interval: 3000 %>
render_async将每3秒轮询一次comments_path ,它将把响应放在有controlalble-interval ID的容器中。我们稍后会看到为什么这很重要。然后,在你的视图中,你可以放两个按钮--一个用来停止轮询,另一个用来启动轮询:
<button id="stop-polling">Stop polling</button>
<button id="start-polling">Start polling</button>
<script>
var container = document.getElementById("controllable-interval")
var stopPolling = document.getElementById("stop-polling")
var startPolling = document.getElementById("start-polling")
var triggerEventOnContainer = function (eventName) {
var event = new Event(eventName)
container.dispatchEvent(event)
}
stopPolling.addEventListener("click", function () {
container.innerHTML = "<p>Polling stopped</p>"
triggerEventOnContainer("async-stop")
})
startPolling.addEventListener("click", function () {
triggerEventOnContainer("async-start")
})
</script>
然后,只要点击 "停止轮询",我们就触发 "async-stop",或者点击 "开始轮询",我们就触发 "async-start":
💡 请注意,事件需要被派发到render_async容器中。
如果你需要对轮询进行细粒度的控制,通过事件进行控制是非常好的。另一个可以做的改进是,根据服务器的响应停止轮询,或者传递一个选项,在设置切换时立即开始轮询(现在不是这种情况)。如果你对这些感兴趣,或者有问题或反馈,可以考虑加入render_async Discord服务器
命名很困难
2.1.7版本的另一个功能允许你为render_async代码所在的content_for ,指定一个名字。这对你来说可能没有什么意义,但有可能在render_async 🤯里面有一个render_async。
你可以为一个端点调用render_async,而这个端点在其响应中又有一个render_async调用。你可以在README中了解更多细节。 新版本允许你区分嵌套render_async的逻辑所在的位置:
<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
<%= content_for :render_async_comment_stats %>
嵌套的render_async的逻辑将在与来自父render_async调用的逻辑不同的地方呈现。在上面的例子中,考虑到你将content_for ,内容将在render_async_comment_stats path内呈现。
总之,如果你想做这种级联渲染,我们有一个需要帮助的错误。发生的问题是,如果你使用Vanilla JS版本的宝石,JavaScript不会被评估。jQuery版本工作得非常好,因为jQuery的replaceWith 方法会评估你给它的JS。如果你对如何用普通的JavaScript解决这个问题有什么想法,请加入我们的Discord,让我们在那里讨论。
新面貌,这是谁?
此外,render_async的README页面也做了一些改进。如果你愿意,可以在这里看看,或者欣赏一下下面的照片。

如果你觉得这个项目有用,别忘了给它加个"🌟",并与你的朋友和同事分享。
最后的想法
发布新版本,打磨README,并致力于新功能的开发,是一件非常愉快的事情!感谢每个人的帮助,并继续努力。感谢每个人的帮助,并继续做伟大的贡献。我知道我在帖子中提到过几次,但如果你正在使用这个工具,请加入讨论组,这样我们就可以使它变得更好