什么是更好的解决方案初始化浏览器后退按钮上的jquery插件,这不仅仅是转换元素在Rails 5中使用turbolinks,如masterslider(照片库)或光滑(轮播),而不是像我下面那样重新加载页面？
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有人指出
我只是想为那些有类似问题的人添加使得初始化函数幂等在某些情况下不一定是解决方案.使用dataTables完成后,我可以避免重复元素.但是,与插件相关的页面上元素的缓存版本不再在浏览器上单击,因为看起来插件未在缓存页面中初始化.
重新加载页面,如果插件已经更改了DOM,因为当有人按下后退按钮时从缓存中检索它似乎非常糟糕,但它是我提出的最好的,所以我转向世界寻求更多的想法!
更新:
所以一些jquery插件有很好的'撤消'/'破坏'方法,如果是这样的话,最好添加一个事件监听器"turbolinks:before-cache",然后像这样调用该方法:
document.addEventListener "turbolinks:before-cache", ->
$('.event-card').each ->
$(@).slick('unslick');
但是有些jquery插件没有破坏函数或破坏实现此功能的函数.就像masterslider有一个$('your-slider-element').masterslider('destroy')功能,但它不会"撤消"它应用于你的html的javascript魔法,就像完全摆脱它一样,所以当你从浏览器的后退或前进按钮返回页面时,滑块根本不存在,因为它被触发的html元素已被破坏.这意味着对于某些插件,我仍然拥有的最佳答案是当他们所在的页面通过浏览器后退和前进按钮导航到页面时完全重新加载页面.
我的rails应用程序在转换过程中闪烁.Turbolinks似乎是罪魁祸首.有谁知道如何阻止闪烁或为什么它会闪烁？
如果您访问下面的链接并单击任何登录按钮,您将复制我正在经历的内容.
奇怪的是,从firefox或safari访问它时没有问题.这只发生在最新版本的chrome和Internet Explorer上？所以我不确定这是否是浏览器问题.
我正在尝试使用turbolinks 5找到一种处理rails(v4.1)flash消息的方法.
我尝试添加data-temporary="true"到每个flash消息div,然后像:
$(document).on('turbolinks:before-cache', function () {
$('[data-temporary]').remove();
});
所以旧的flash消息不会被缓存,并且在用户下次访问同一页面时不会显示.
但是,这使我在我正在使用的页面上出现问题,flash.now因为在这些页面上,flash已从缓存版本中删除,但随后turbolinks刷新服务器中的内容,flash.now然后出现消息,这有点不和用户观点.
我已经环顾四周,无法找到闪光灯的任何内容,以表明它们是否.now存在,以便data-temporary可以应用于临时闪光灯.
我正在尝试使用turbolink而不是禁用它的功能.
我正试图找到一种方法来删除闪光before-cache但不是如果它们是flash.now类型.
有什么建议？
我有一些代码只想在应用程序的一页上运行，因此在 HTML 中我使用以下内联 JS：
<script>
$(document).on('turbolinks:load', function() {
console.log("Ground control to major tom?")
});
</script>
但是，当用户离开该页面时，该代码仍在每次后续访问中运行。
如何仅对特定页面使用turbolinks:load 事件？
我是否需要以某种方式“拆除”该事件处理程序？我如何防止它影响我可能拥有的任何其他 Turbolinks:load 事件？
我完全明白为什么 Turbolinks 5 很棒，如果您正在阅读它，您可能也会这样做，但我对它与其他脚本的糟糕表现感到非常沮丧。
迄今为止，还没有简单的解释（人类可读的）来展示如何以允许它们运行的方式包装现有的 jQuery 脚本。以这个为例： https: //github.com/Bttstrp/bootstrap-switch。写得很好，简单易懂。您将 js 和 css 加载到资产管道中并在某个页面上实例化它。
# view.html.erb
<input type="checkbox" class="switch"> switch button
<script type="text/javascript">
$(".switch").bootstrapSwitch();
</script>
您转到 view.html，单击另一个页面，单击返回，您会看到两个按钮。
接下来，您花了 5 个小时寻找一种方法，让 Turbolinks 仅加载一次 bootstrapSwitch 实例（如果之前未加载）。好吧，即使你这样做了，功能也会消失。点击它不会起作用。
$(document).on("turbolinks:load", function()...将在每次 Turbolink 访问时加载它，目前，我可以让它工作并且不创建重复项的唯一方法是禁用 view.html 上的缓存
<%= content_for :head do %>
<meta name="turbolinks-cache-control" content="no-cache">
<% end %>
这感觉有点愚蠢。
我认为这一切都与使用幂等有关 - https://github.com/turbolinks/turbolinks#making-transformations-idempot但你实际上是如何做到这一点的？
有人可以以这个简单的插件为例，分享一个简单、优雅的解决方案来使其工作，然后我们可以用其他脚本重现它吗？
我正在测试Turbolinks是否可以帮助我们的 Web 应用程序看起来更快一点，表现得“几乎像”一个单页应用程序。
由于我们已经在所有链接上的所有点击上有了一种“主钩”，我设置data-turbolinks="false"了<body>然后更改了我们的点击处理程序以调用 Turbolinks：
function goToUrl(url) {
// some controls here, and then ...
Turbolinks.visit(url);
}
我还禁用了缓存并将根设置为/：
<meta name=\"turbolinks-cache-control\" content=\"no-cache\">
<meta name=\"turbolinks-root\" content=\"/\">
但是，我注意到它总是执行标准的页面更改，而不是它的“魔法”。
如果我从控制台调用该方法，也会发生同样的情况，没有显示错误或警告，但页面加载正常，而不是使用 Turbolinks“魔术”。
它唯一有效的时间是访问根地址 ( "/") 时。
Is there some more configuration involved, than simply using the visit() method?
EDIT:
After further testing, I noticed that, when the call to Turbolinks.visit(url) seems to "fail", by issueing a normal page navigation instead, it returns an object like that …
javascript hyperlink single-page-application turbolinks turbolinks-5
我正在将Turbolinks 5与Rails 5一起使用，并且我正在设置一个 JS 间隔，以便通过 AJAX 每 10 秒刷新一次页面内容：
<script type="text/javascript">
$(document).ready(function() {
function fetchContent() {
// some AJAX request
}
setInterval(fetchContent, 10000);
});
</script>
当我第一次加载包含上述代码的页面时，它可以工作：fetchContent每 10 秒触发一次。
但是，当我导航到另一个页面时，它fetchContent一直在触发。此外，当我返回该页面（使用浏览器后退按钮）时，fetchContent会不可预测地多次触发。显然，这不是想要的行为。
如何解决这个问题？
注意：要解决这个问题，我知道我可能需要某种clearInterval调用，但是我应该如何使用 Turbolinks 5 进行调用，例如我应该绑定什么事件？从 Turbolinks 5 开始，API 发生了变化。特别是，所有 Turbolinks Classic 事件都已重命名，并且有几个（包括）page:update已被删除，因此我无法使用诸如this、this或this 之类的解决方案。
ruby-on-rails setinterval turbolinks ruby-on-rails-5 turbolinks-5
对于这个看似简单的问题，我找不到任何答案。在我的 rails5 应用程序中，某些链接确实使用 turbolinks 来加载新页面。但有些只是启动整页重新加载。
该链接没有附加 js，该链接上未禁用 turbolinks。
此链接使用 turbolinks：
= link_to qm_input_path('hour') do ...
<a class="navbar-brand" href="/qimen/hour/input"> ...
在行动中它有
render layout: 'input'
而这个链接没有：
= link_to qm_chart_path(@foo, @bar), class: 'btn btn-default pull-right next' do ...
<a class="btn btn-default pull-right next" href="/qimen/hour/chart/foo/bar"> ...
在行动中它有
render layout: guess_layout
因此，没有任何内容明确阻止 turbolinks 工作。
为什么？