涡轮链接和负载

Question

我正在尝试在 Rails 应用程序中同时使用 Turbolinks 3.0 and Ladda。 ladda 文档指出：

"If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the bind() method"

这就是我在实施 Turbolinks 之前所做的事情。 Turbolinks 自动处理大多数简单的获取请求，但对于表单提交，我将我的表单切换到远程并且只呈现我页面的主要 div 返回，如自述文件中所示。这在一般情况下效果很好。

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

因为我没有按照上面引述的方式重新加载页面，所以我试图在没有绑定方法的情况下激活 Ladda。但我能想到的唯一其他方法是在单击时激活 Ladda。

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

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

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

另一个方向是通过绑定方法继续使用 Ladda，然后通过 Turbolinks 在页面 "loaded" 之前重置任何 ladda 图像。我是这样完成的：

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

如果我在调试器中放置一个断点，我可以看到在通过 Turbolinks 加载下一页之前成功地将按钮重置为原始状态。但是当我回击时，加载器回到了它的 deactivated/grey/loading 状态。

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

如有任何帮助，我们将不胜感激！

编辑：我现在才意识到，如果用户回击，我所有的 JS 都会损坏。

Answer 1

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

这里实现了一个workaround/fix：https://github.com/rails/turbolinks/pull/509

您需要在脚本标签上使用 "data-turbolinks-eval=true" 才能触发 JS，即使它是一个页面 back/forward。

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

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

涡轮链接和负载

Turbolinks & Ladda

jquery

ruby-on-rails

turbolinks