使用render_async按需重新加载Rails Partials的介绍

热门技术勘探工
174 阅读4分钟

新版本的render_async出来了，其中一个最受欢迎的功能也出来了！继续阅读以了解新的2.1.8版本的宝石中的新奇功能。

对近期变化的快速概述:

就是这样，让我们跳到下面每个变化的细节:

👂 Psst！我们有一个render_async Discord 服务器。在那里加入我们。

按需刷新Rails分词

正如你可能已经知道的，render_async在你的页面加载后异步加载参数。以异步方式加载参数是非常好的，而且很有帮助，但是gem用户想要更多的权力和控制。经过这么多不同的要求，我们实现了手动刷新页面上已经加载的部分的功能，而无需重新加载整个页面。

你可以通过向render_async HTML容器派发一个名称为 "刷新 "的事件来轻松实现这一功能。让我们在一个例子中展示一下，我们在一个局部中加载评论:

<%= render_async comments_path,
                 container_id: 'refresh-me',
                 replace_container: false %>

<button id="refresh-button">Refresh comments</button>

<script>
  var button = document.getElementById('refresh-button')
  var container = document.getElementById('refresh-me');

  button.addEventListener('click', function() {
    var event = new Event('refresh');
    // Dispatch 'refresh' on the render_async container
    container.dispatchEvent(event)
  })
</script>

现在，render_async将在页面加载时加载评论。但是，如果用户想重新加载评论部分，她可以点击 "刷新评论 "按钮。然后，该按钮将向render_async的容器发出 "刷新 "事件。

需要注意的是，你需要传入replace_container: false 。 传入这个选项将保存原始的render_async HTML元素，这样你就可以对它发出 "刷新 "事件。要了解如何在全局范围内启用这个功能，以便你只在一个地方写它，请参阅配置选项。

在这个功能上的工作和解决这么多人的问题是很了不起的。我希望你发现它在你的日常工作中很有用。

在使用切换器时立即开始轮询

我们在现有的功能组合中增加了一个新功能。以防你不知道，你可以用render_async做HTML轮询。 在此基础上，我们增加了一个功能，你可以按需开始和停止轮询。这是为用户做了很好的服务，但有些用户希望在页面加载时立即开始轮询，而不是等待用户触发轮询。

幸运的是，我们增加了一个功能，允许你指定在页面加载时开始轮询:

<a href='#' id='comments-button'>Toggle comments loading</a>
<%= render_async comments_path,
                 toggle: { selector: '#comments-button',
                           event: :click,
                           start: true },
                 interval: 2000 %>

上面的代码应该呈现 "切换评论加载 "按钮，并在页面呈现时立即开始投票。这一切都可以通过在toggle 散列中添加start: true 选项来实现。

通过新的配置选项，使代码更加简洁

最后，一些新的配置选项在最新的2.1.8版本中出现。那么，什么是新的呢？如果你需要用render_async设置nonce: true ，现在你可以在全局范围内进行。另外，如果你准备使用我们的刷新参数的新功能，你将从在一个地方设置replace_container: false中受益。

你可以在你的初始化器或你觉得舒服的地方做这件事:

RenderAsync.configure do |config|
  config.nonces = true # setting it to true, all render_asnyc javascript_tag elements receive nonce: true
  config.replace_container = false # setting it to false, the original render_asnyc container is kept
end

要弄清楚为什么你需要replace_container: false ，请阅读本博文关于刷新Rails参数的第一部分。

如果你是第一次听说这个，我们在文档中还有其他的配置选项。

修复启动和停止事件

async-start 和async-stop事件的事件监听器出现了问题。这些事件的作用是通过事件控制轮询。由于这些事件监听器是在render_async JavaScript代码被评估后立即设置的，如果你把content_for :render_async放在你的页面头部，它们就不会被注册。

在新版本中，我们确保这些事件监听器在页面完全加载后才注册。如果你有这个问题，你可以安全地把content_for 放回头部，一切都应该正常。

最后的想法

如果你觉得这个项目有用，别忘了给它加星🌟，并与你的朋友和同事分享。

发布新版本、打磨README、开发新功能是一件非常愉快的事情！感谢大家的帮助，并继续努力。感谢每一个帮助过我们的人，并继续做着伟大的贡献。如果你正在使用这个工具，请加入讨论组。这样，我们可以使它变得更好

avatar
文章
阅读
粉丝