jquery - Turbolinks 复制富文本编辑器

Question

我正在使用带有turbolinks 的Rails 5 和summernote，它是一个简单的所见即所得编辑器。我目前正在turbolinks:load 上加载插件，如下所示:

$(document).on('turbolinks:load', function() {
  $('[data-provider="summernote"]').each(function(){
    $(this).summernote({ });
  })
}

但是，如果我导航到其他地方，然后按浏览器上的后退按钮，编辑器就会重复

我尝试准备好 jquery 文档，但插件不会加载，除非我首先加载的页面是带有编辑器的页面。请帮忙。

Answer 1

我知道 Rails 4.2 和 5 之间的 Turbolinks 有一些变化，但这是我对此的看法。

In many cases, you can simply adjust your code to listen for the turbolinks:load event, which fires once on the initial page load and again after every Turbolinks visit.

https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

如果上述引用正确，那么每次您访问该页面(无论是 ready 还是 page:load )，turbolink 触发器都会触发。

现在，关于 Turbolinks 的一个误解是访问另一个页面会破坏该页面中的 JavaScript 元素。

这是错误的，事实上这是 Rails 4.2 中 Turbolink 的大问题。

您可以通过执行以下操作来测试这一点(不必相信我的话):

$(document).ready(...)

然后重新加载页面，导航离开，然后返回。

如果你的代码仍然被实例化，那么这就证明代码被持久化了。

如果是这种情况，那么我们需要重新思考如何使用 JS。

所以代码仍然存在并且 on意味着每次，但我们希望它发生一次，无论页面是由浏览器还是涡轮链接加载。

我认为适当的解决方案是:

$(document).one('turbolink:load', ...)

编辑

我能够完美地重现这个问题。

但是我认为这种行为是......正确的。

问题如下:

1. Summernote 在您的 <div data-provide="summernote" 下面创建元素然后设置 style="display:none;
2. 所有元素(包括 Summernote 添加的元素)都会被缓存。
3. 然后，当代码重新执行时(应该如此，除非其表现形式如此)，代码会找到 <div data-provide="summernote">只是在上面冷却并重新创建另一个 Summernote 框。

现在出现了一个哲学问题，它将改变所适用的解决方案:

Should we cache the page?

如果答案是肯定的，那么唯一的选择就是利用 Summernote 将 div 设置为隐藏的事实，这对我们有利。

$(document).on('turbolinks:load', function() {
  $('[data-provider="summernote"]').each(function() {
    if ($(this).is(":visible"))
      $(this).summernote()
  })
})

注意，我们可以以不同的方式区分实例化的 Summernote div(即添加类或数据属性)，但这只是一种方便的方法。

否则，通过不缓存页面，一切都会重新执行，一切都很好。

P.S.使用 Turbolinks 时总会出现一些复杂情况，并不是因为它是一个不好的工具。但是因为 JS 库消除了页面循环工作方式的假设，而 Turbolinks 彻底改变了页面循环工作方式。

希望这不仅有助于提供解决方案，而且有助于理解!

干杯