Turbolinks，：凤凰城的远程表单和链接？答案

【问题标题】：Turbolinks, :remote forms and links in Phoenix?Turbolinks，：凤凰城的远程表单和链接？
【发布时间】：2017-02-17 08:22:47
【问题描述】：

有没有办法在 Phoenix 中使用诸如 RoR turbolinks 和 :remote 表单和链接之类的东西？

更新

基本上，远程表单和链接以及 turbolinks 是一种构建动态 JavaScript 站点的简单方法，以防 React 或 Backbone 等高级框架变得过大。

什么是:remoteforms and links，它是 Ruby on Rails 表单和链接助手的特殊选项，它不是提交表单和导航链接而是向服务器发送 AJAX 请求，服务器反过来用一些 JavaScript 响应和浏览器评估它。

这种技术使得 JavaScript 表单和 UI 变得非常又快又便宜，而无需借助 React 或 Backbone 等高级框架。

Turbolinks 是一种快速且廉价的方法，可以在不借助 React 或 Backbone 等高级框架的情况下加速 Web 应用中的页面转换。它只是更新其内容，而不是重新加载整个页面。

【问题讨论】：

简短描述或链接什么是 turbolinks 和 :remote 表单将帮助我们回答您的问题。
正如 Jose 曾经说过的：Phoenix 速度如此之快，以至于所有链接都是 turbolinks。
@JustMichael Phoenix 确实很快，但服务器和网络并不是唯一的延迟来源，浏览器也引入了自己的延迟（解析、JS 解析等）。 .).
@AlexeyPetrushin 开个玩笑，显然不恰当，对此我深表歉意。
@AlexeyPetrushin 我创建了带有 turbolinks 的示例 repo github.com/Troush/turbolinks_phoenix

标签： elixir phoenix-framework

【解决方案1】：

关于远程表单，您可以自己编写一些 javascript（或本例中为 jquery），如下所示：

 $("body").on("submit", "form[data-remote='true']", function(e) {
    e.preventDefault();
    let $form = $(this);

    $.ajax({
      method: $form.attr("method"),
      url: $form.attr("action"),
      data: $form.serialize(),
      dataType: "script",
      beforeSend: function(_jqXHR, _settings) {
        // add a loader or whatever
      },
      complete: function(_jqXHR,_textStatus) {
        // remove a loader or whatever
      }
    });
  });

【讨论】：

是的，谢谢，已经做到了。遗憾的是 JS 还不够，还需要在 Phoenix Router 中指定 JS 格式，处理 CSRF 令牌和其他一些小问题。开箱即用所有这些东西会很好。
@AlexeyPetrushin 为什么需要处理 CSRF 令牌？
如果您点击导致 AJAX 发布请求的链接 - 您必须传递 CSRF 令牌。
@AlexeyPetrushin 你不能用phoenix_html's link() 生成它吗？它将生成一个包含在表单中的链接，然后，当单击该链接时，您可以提交已包含令牌的表单。
谢谢，是的，这是一种可能的方式，但是我必须专门处理这个表单 - 拦截它的提交并将其作为 AJAX 发送。这绝对是一种选择，但似乎直接将 CSRF 令牌添加到 AJAX 请求是一种更简单的方法。（但是，这只是我的喜好，也许这实际上并不是最好的处理方式......）

【解决方案2】：

Turbolinks 是 JavaScript 库。你可以在任何地方使用它。见https://github.com/turbolinks/turbolinks/tree/ab019670632b719b3d2ecdccb158ff9f4f47746f#installation-using-webpack 并像 brunch 一样集成它。

安装turbolinksnpm install --save turbolinks

将 node_modules/turbolinks/dist/tubolinks.js 添加到您的 brunch-config.js 作为依赖项。

或者使用 webpack 和 Phoenix http://www.phoenixframework.org/docs/static-assets#section-using-another-asset-management-system-in-phoenix

更新：此处的示例 repo https://github.com/Troush/turbolinks_phoenix

【讨论】：

【解决方案3】：

所有 Rails 的链接/表单远程魔法（以及其他一些不错的东西）都发生在这个 Javascript 库中：

https://github.com/rails/jquery-ujs/blob/master/src/rails.js

我不明白为什么这不适用于 Phoenix（可能需要一些调整）。

【讨论】：

我真的很怀念 phoenix 中的 jquery-ujs。我们应该做什么样的改变，这样我就可以像 rails 一样在 phoenix 中使用它？

【解决方案4】：

将 Turbolinks 与 Phoenix 一起使用非常简单。您根本不需要对表单进行任何更改。只需执行此操作即可启动并运行 Turbolinks：

npm install --save turbolinks
在 npm 部分中将 Turbolinks 添加到您的 brunch-config.js： npm: { enabled: true, whitelist: ["phoenix", "phoenix_html", "turbolinks"] }
将 turbolink 导入您的 app.js： import "phoenix_html" import "turbolinks" ...

就是这样。您将在不影响 SEO 的情况下提高整个网站的速度。如果您确实需要，您可以稍后随时决定将表单更改为 JSON API 或采用成熟的 SPA 路线。

【讨论】：