Turbolinks，：Phoenix 中的远程表单和链接？

Question

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

更新

基本上，远程表单和链接以及 turbolinks 是一种 构建动态 JavaScript 站点的简单方法 在 React 或 Backbone 等高级框架的情况下矫枉过正。

什么是 :remote forms and links，它是 Ruby 在 Rails 表单和链接助手上的一个特殊选项，而不是提交表单和导航链接发送 AJAX 向服务器请求，服务器反过来响应一些 JavaScript 并且浏览器对其进行评估。

这项技术使它变得非常 快速且便宜 做 JavaScript 表单和 UI 而无需诉诸 React 或 Backbone 等高级框架。

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

Answer 1

Turbolinks 是 javascript 库。您可以在任何地方使用它。参见 https://github.com/turbolinks/turbolinks/tree/ab019670632b719b3d2ecdccb158ff9f4f47746f#installation-using-webpack 并像早午餐一样整合它。

安装 turbolinks npm install --save turbolinks

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

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

更新：此处示例回购 https://github.com/Troush/turbolinks_phoenix

Answer 2

关于远程表单，你可以自己写一些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
      }
    });
  });

Answer 3

所有 Rails 的 link/form 远程魔法（和其他一些好东西）都发生在这个 Javascript 库中：

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

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

Answer 4

在 Phoenix 上使用 Turbolinks 非常简单。您根本不需要对表单进行任何更改。只需这样做即可起床运行 Turbolinks：

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

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

Turbolinks，：Phoenix 中的远程表单和链接？

Turbolinks, :remote forms and links in Phoenix?

elixir

phoenix-framework