Question

我试图在Rails应用程序中一起使用Turbolinks 3.0和Ladda。 ladda文档说明：

＆＃34;如果您将使用加载动画作为表单提交到服务器（总是导致页面重新加载）你可以使用bind（）方法＆＃34;

在我实施Turbolinks之前，我正在做的事情。 Turbolinks可以自动处理大多数简单的get请求，但是对于表单提交，我将表单切换到远程，只是将我的页面的主div渲染回来，如自述文件所示。这通常很有用。

但是，如果用户在执行此操作后点击后退按钮，则ladda按钮仍处于禁用，灰色和加载器图像状态。我不想依赖计时器。

由于我没有像上面引用的那样重新加载页面，我试图在没有bind方法的情况下激活Ladda。但是我能想到的另一种方法就是在onclick上激活Ladda。

但出于某种原因，如果我将onclick绑定到提交按钮，它会打破turbolinks，并且表单根本没有提交。

$(document).on('click', '.ladda-button', function() {
  $(this).ladda('start');
});

这将激活ladda，但之后表单尚未提交。我使用jquery-turbolinks，以便代码可以工作吗？

另一个方向是继续使用Ladda通过bind方法，然后在页面被加载之前重置任何ladda图像＆＃34;通过Turbolinks。我完成了如下：

$(document).on("page:before-unload", function() {
  $(".ladda-button").ladda();
  $(".ladda-button").ladda("stop");
});

如果我在调试器中放置断点，我可以看到在通过Turbolinks加载下一页之前，这成功地将按钮重置为其原始状态。但是当我回击时，装载机又回到了停用/灰色/加载状态。

我不想将我的整个应用程序重新编写为客户端javascript MVC和API后端，但我真的希望它有一个快速，无页面刷新的感觉 - 并使用这些真棒ladda加载图像。到目前为止，Turbolinks 3.0非常棒，但我真的很难过这个。

非常感谢任何帮助！

编辑：我刚刚意识到如果用户回击我的所有JS都会被破坏。

Answer 1

这里有一个更大的问题 - 按下后退或前进时没有脚本运行。装载机只是我注意到的第一个。

您需要使用＆＃34; data-turbolinks-eval = true＆＃34;在您的脚本标记上，即使其页面返回/转发，也会触发JS。

然后重新初始化那里的ladda / loading图像。

<script data-turbolinks-eval=always>
  $(".ladda-button").ladda();
  $(".ladda-button").ladda('stop');
  $(".ladda-button").ladda('bind');
</script>