菲尼克斯的远程形式和链接？

Question

是否有一种方法可以使用像RoR图文链接和:远程表单和凤凰链接？

更新

基本上，远程表单、链接和turbolinks是构建动态JavaScript站点的简单方法，在高级框架(如React或主干)可能会导致过度使用的情况下，构建动态站点。

:remote 表格和链接是Rails表单和链接帮助程序的一个特殊选项，它不是提交表单和导航链接，而是将AJAX请求发送给服务器，然后服务器响应一些JavaScript并由浏览器对其进行评估。

这种技术使得它非常快速和廉价的做JavaScript表单和UI，而不求助于高级框架，如React或主干。

吐鲁宾克是一种快速、廉价的方法，可以在web应用程序中加速页面转换，而不需要求助于高级框架(如React或主干)。而不是重新加载整个页面，它只是更新其内容。

Answer 1

使用Turbolinks和菲尼克斯是非常简单的。你根本不需要对你的表格做任何修改。这样做是为了和Turbolinks一起跑步：

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

就这样。你将在不影响SEO的情况下，在你的网站上得到一个速度提升。如果真的需要的话，以后总是可以决定将表单更改为JSON，或者选择完全成熟的SPA路线。

Answer 2

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作为依赖关系。

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

更新:这里的示例回购，凤凰城

Answer 3

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