我正在使用Rails 5 with turbolinks和summernote这是一个简单的所见即所得编辑器。我目前加载插件上turbolinks：负载，就像这样：Turbolinks复制富文本编辑器

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

但如果我浏览别的地方，然后按我的浏览器后退按钮编辑器被复制

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

来源

2016-11-17 Ed_

必须在一个特定的'id' initialiaze summernote不是'$（本）' – EaBangalore

我知道Turbolinks在Rails 4.2和5之间有一些变化，但这是我的承担。

在许多情况下，您可以简单地调整代码以监听turbolinks：加载事件，该事件在初始页面加载时触发一次，并在每次Turbolink访问后再次触发。

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

如果上述报价是正确的，那么每次访问的页面（不论ready或page:load）的的TurboLink触发条件会。

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

这是错误的，实际上这是Turbolink在Rails 4.2中的一个大问题。

您可以通过做测试了这一点（没有把我的话）：

$(document).ready(...)

然后重新载入页面，导航离开，然后回来。

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

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

所以代码依然存在，而且on意味着每一次，但是我们希望它一次发生，无论浏览器是否加载页面或者使用turbolinks。

我认为合适的办法是：

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

编辑

我能够完全重现该问题。

然而，我认为行为是......正确的。

的问题如下：

Summernote创建下方的<div data-provide="summernote" elems的然后设置style="display:none;
所有元素（包括那些由summernote加）被缓存。
然后，当代码被重新执行时（因为它应该除非它是这样表示的）代码发现<div data-provide="summernote">只是在上面冷却并重新创建另一个summernote框。

现在到了一个哲学问题，这将改变应用有什么解决办法：

我们应该缓存的页面？

如果答案是肯定的，那么唯一的选择就是使用summernote set的div来隐藏我们的优势。

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

注意，我们可以区分不同的实例summernote格（即添加类或数据属性），但是这仅仅是一个方便的途径。

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

P.S.使用Turbolinks时总是会有复杂的问题，并不是因为它是一个糟糕的工具。但是因为JS库对你的页面循环如何工作假设并且Turbolinks是对页面循环如何工作的彻底检查。

希望这有助于不仅提供解决方案，但也有一些理解！

干杯

来源

2016-11-17 16:45:03 fbelanger

谢谢，这是一个很好的解释，但错误保持与。一（发生），因为“注Turbolinks使用cloneNode（true）复制页面，这意味着所有附加的事件监听器和相关数据都将被丢弃。“现在我只是关闭了缓存，现在正在工作，但我希望我能找到一种替代解决方案。 –

嗯..这是呃，这不就是说，重复的summernote应该永远不会发生在第一位？或者我误解了这个？我打算去测试一下，brb。 – fbelanger

@Ed_我转载了这个问题并更新了我的答案！ – fbelanger

Turbolinks复制富文本编辑器

回答

编辑

相关问题