Turbolinks +灯箱（Rails 5）

问题描述：

我知道这个问题已被要求死亡，但我仍然无法解决我的应用程序中的东西。我运行一个Rails应用程序5（与turbolinks和的fancybox收藏宝石），并有一些特定页面的JavaScript对模型展示页面上显示的图像：Turbolinks +灯箱（Rails 5）

application.html.erb

<head> 
    ... 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    ... 
</head> 
<body> 
    ... 
    <%= yield :page_scripts %> 
</body>

表演。 html.erb

<% content_for :page_scripts do %> 
    <script type="text/javascript"> 
    $(document).on('turbolinks:load', function() { 
     $("a.fancybox").fancybox(); 
    }) 
    </script> 
<% end %>

我仍然得到响应经典从而使图像负荷高达很好地在第一页的访问或刷新页面。离开和返回再次停止灯箱工作（似乎只是挂在我的情况）。

如何使用'turbolinks：load'功能使其正常工作？

答

您可以更改为以下代码。

$(document).ready(function() { 
    document.addEventListener("turbolinks:load", function() { 
    $("a.fancybox").fancybox(); 
    })  
});

我希望这对你有所帮助。你可以通过这个链接turbolinks去详细信息。

Hi Muhamad。我已经尝试过，并没有帮助 - 仍然是一个例子，它将在第一次访问/刷新时起作用，但不会在随后的访问中起作用。我不确定是否与加载图像本身有关 - 目前它们是从公共/文件夹加载的。 – GerryDevine

答

我不知道这完全有资格作为一个答案，但考虑到在这个环节的情景非常相似：

https://github.com/fancyapps/fancybox/issues/1413

....我结束了以下的建议和消除使用data-turbolinks =“false”从显示页面跳转到链接。

答

我不熟悉tubolinks，但请记住，$("a.fancybox").fancybox()只是将click事件绑定到当前元素。所以，你可能不得不在导航后重新附加它。另一种可能的解决方案是使用使用selector选项的事件委托，例如（使用v3.1）：

$().fancybox({ 
    selector : '[data-fancybox="images"]', 
    animationEffect : "fade" 
});

Turbolinks +灯箱（Rails 5）

相关推荐