Turbolinks & Ladda

Question

我试图在Rails应用程序中同时使用Turbolinks 3.0和拉达。拉达文件指出：

“如果要为提交给服务器的表单使用加载动画(总是导致页面重新加载)，则可以使用bind()方法

这就是我在实施Turbolinks之前所做的。对于大多数简单的get请求，Turbolinks会自动工作，但是对于表单提交，我将表单切换到远程，并将页面的主div显示在自述文件中。总的来说，这是很好的工作。

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

由于我没有像上面的引号那样重新加载页面，所以我试图在没有bind方法的情况下激活Ladda。但我唯一能想到的办法就是在点击时激活拉达。

但是由于某种原因，如果我绑定一个onclick到submit按钮，它就会打破turbolinks，而表单根本就不会提交。

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

这会激活ladda，但是表单不会提交。我正在使用jquery-turbolinks，所以代码应该能工作吗？

另一个方向是通过bind方法继续使用Ladda，然后在页面通过Turbolinks“加载”之前重置任何ladda图像。我做到了以下几点：

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

如果我在调试器中放置一个断点，我可以看到，在通过Turbolinks加载下一页之前，它成功地将按钮重置为原来的状态。但当我还击时，加载程序又回到了它的停用/灰色/加载状态。

我不想把整个应用程序重写为客户端javascript和API后端，但我真的希望它有一种快速、无页面刷新的感觉--并使用那些令人敬畏的ladda加载图像。到目前为止，Turbolinks 3.0是很棒的，但是我真的很难理解这个。

任何帮助都将不胜感激！

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

Answer 1

有一个更大的问题-没有脚本运行时，按回或向前。装载机是我第一个注意到的。

在这里实现了一个解决方案/修复：https://github.com/rails/turbolinks/pull/509

您需要在脚本标记上使用"data-turbolinks-eval=true“来激发JS，即使它是一个页面返回/转发。

然后重新初始化ladda/加载图像。

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