浏览器上的JQuery插件初始化返回按钮Turbolinks Rails 5

什么是一个更好的解决方案，初始化浏览器后退按钮上的jquery插件，不仅仅是在Rails 5中使用turbolink时转换元素，如masterslider（照片库）或光滑（旋转木马），而不是像我在下面那样重新加载页面？浏览器上的JQuery插件初始化返回按钮Turbolinks Rails 5

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：负荷”，如果有任何HTML元素，只会出现如果插件已经初始化，如果是的话，然后刷新页面，因为即使元素在那里，插件没有初始化。然后，我将所有拥有我想要的类的元素初始化为插件。如果有人指出

我只想补充那些遇到类似问题，这使得一个初始化函数幂等并不一定是在某些情况下，解决方案https://github.com/turbolinks/turbolinks/issues/106：

有些人在这里遇到了这个问题。用dataTables完成后，我可以避免重复的元素。但是，与插件相关的页面上的元素的缓存版本不再在浏览器上单击，因为它看起来该插件未在缓存页面中初始化。

重新加载页面，如果该插件已经改变了DOM，因为它被从缓存中检索，当有人按下后退按钮只是似乎很糟糕，但其最好的我想出来的，所以我转向向世界寻求更多的想法！

UPDATE：

所以一些jQuery插件有很大的“撤消” /“毁灭”的方法，如果是这样的话，最好就"turbolinks:before-cache"添加事件侦听器，然后调用该方法，像这样：

document.addEventListener "turbolinks:before-cache", -> 
    $('.event-card').each -> 
    $(@).slick('unslick');

但一些jquery插件没有销毁函数或销毁实现此功能的函数。像masterslider有一个$('your-slider-element').masterslider('destroy')函数，但它并没有'撤销'它适用于你的html的JavaScript魔术，就像完全摆脱它一样，所以当你从浏览器返回到页面后退或前进按钮时，滑块根本不存在，因为它被触发的html元素已被销毁。这意味着对于一些插件来说，我仍然拥有的最佳答案是在页面所在的页面通过浏览器后退和前进按钮导航时完全重新加载页面。

来源

2016-09-21 Sava

因此，我已经提出了处理'恢复'访问的最佳答案（正如我学习浏览器后退和前进按钮访问在turbolinks世界中所称的），涉及jquery插件，它们没有'撤消'方法是简单地选择页面退出缓存。我扔实现了这个：

<% if content_for?(:head) %> 
    <%= yield(:head) %> 
<% end %>

在我application.html.erb文件的<head>部分，然后在我不想turbolinks包括在它的缓存页面的顶部，我把：

<% content_for :head do %> 
    <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %>

这种方式turbolinks从网络取回页面而不是缓存，因为这将是'恢复'访问的正常行为。只是非常仔细地阅读文档，并找出如何在rails中实现它并不算太坏。

来源

2016-09-30 22:38:37 Sava

这是一个很好的选择，我没有想到，而不是附加turbolinks回调来销毁/重新启动类似数据表的东西。谢谢。 – gregblass

浏览器上的JQuery插件初始化返回按钮Turbolinks Rails 5

回答

相关问题