document.addEventListener 'turbolinks:load',->
slickElementsPresent = $('.event-card').find('div.slick-slide')[0]
if slickElementsPresent?
window.location.reload();
else
$('.event-card').each ->
$(@).not('.slick-initialized').slick {
infinite: false,nextArrow: $(@).find('.event-more-details-button'),prevArrow: $(@).find('.event-card-slide-back-button')
}
要清楚,我检查看看’turbolinks：load’是否有任何html元素只有在插件初始化时才会出现,如果是,那么刷新页面,因为即使元素在那里,插件也是没有初始化.然后我在所有具有我想要它的类的元素上初始化插件.
有些人在这里遇到了这个问题：https://github.com/turbolinks/turbolinks/issues/106有人指出
I just want to add for those having similar issues that making an initialization function idempotent is not necessarily the solution in some circumstances. Having done so with dataTables I am able to avoid duplicate elements. However,the cached versions of the elements on the page related to the plugin no longer function on a browser back click as it seems the plugin is not initialized in a cached page.
重新加载页面,如果插件已经更改了DOM,因为当有人按下后退按钮时从缓存中检索它似乎非常糟糕,但它是我提出的最好的,所以我转向世界寻求更多的想法！
更新：
所以一些jquery插件有很好的’undo’/’destroy’方法,如果是这样的话,最好在“turbolinks：before-cache”上添加一个事件监听器,然后像这样调用该方法：
document.addEventListener "turbolinks:before-cache",->
$('.event-card').each ->
$(@).slick('unslick');
但是有些jquery插件没有破坏函数或破坏实现此功能的函数.就像masterslider有一个$(‘你的滑块元素’).masterslider(‘destroy’)函数,但它不会’撤消’它应用于你的html的javascript魔法,就像完全摆脱它一样,并且因此,当您从浏览器后退或前进按钮返回页面时,滑块根本不存在,因为它被触发的html元素已被破坏.这意味着对于某些插件,我仍然拥有的最佳答案是当他们所在的页面通过浏览器后退和前进按钮导航到页面时完全重新加载页面.
解决方法
<% if content_for?(:head) %> <%= yield(:head) %> <% end %>
在< head>中我的application.html.erb文件的一部分,然后在页面的顶部我不希望turbolinks包含在它的缓存中,我把：
<% content_for :head do %> <Meta name="turbolinks-cache-control" content="no-cache"> <% end %>
这样,turbolinks从网络而不是缓存中获取页面,这是“恢复”访问的正常行为.只需要非常仔细地阅读文档,并弄清楚如何在rails中实现它并不是太糟糕.