javascript - 如何在没有 erb.js 的情况下响应 AJAX 调用/为什么使用 erb.js？

Question

过去几天我一直在尝试理解 Rails 上 AJAX 的不同方面。在阅读了一些介绍后，我对 Rails 内置的 UJS 功能有了一定的了解。我编写的一个小玩具应用程序的示例，我想在其中引入一些 AJAX 功能...

Controller 操作如下所示

class ExpenseListsController < ApplicationController
  before_action :require_authentication

  ...

  def create
    @expense_list = ExpenseList.new(expense_list_params)
    if @expense_list.save
      respond_to do |format|
        format.html do
          flash[:success] = 'Created!'
          render :show
        end
        format.js
      end
    else
      respond_to do |format|
        format.html do
          @errors = @expense_list.errors
          flash[:danger] = 'Something went wrong!'
          render :new
        end
        format.js
      end
    end
  end

  ...

end

在我看来，我通过 remote: true 选项调用该操作

相应的create.js.erb看起来像这样

var form_field = $('.expense_lists_form');
var expenseLists = $('#expense-lists');

expenseLists.append("<%= j render @expense_list %>");
form_field.slideUp(200);

@expense_list 的模板如下所示

.col-xs-12.col-lg-3.col-md-4{id: "expense_list_#{expense_list.id}"}
  .panel.panel-default
    .panel-heading
      = link_to expense_list.name, expense_list_path(expense_list)
    .panel-body
      .links
        = link_to 'Modify list', edit_expense_list_path(expense_list), remote: true
        = link_to 'Delete list', expense_list_path(expense_list), method: 'delete', remote: true
      .description
      %p
      - if expense_list.description.present?
        = expense_list.description
      - else
        %i
          No description supplied, add one
          =link_to 'here', edit_expense_list_path(expense_list)
      .email-notification.text-muted
        (Email notifications enabled)
    .panel-footer
      = "Expenses in #{current_month_name}:"
      %b
        = "#{expense_list.sum_of_exp_in_month(current_month, current_year)}€"
      = "(#{expense_list.euros_left_in_month(current_month, current_year)}€ left)" if expense_list.budget_in_euro

它有效，但对我来说这个想法似乎有一些缺点:

• 通过额外的 *.js.erb 文件使我的文件结构变得臃肿
• 扭曲了 JS 和代码库其余部分的物理分离
• 当我使用 HAML 时，它引入了一种新的编码风格 (ERB)

现在我有两个问题:

1. 每个教程(到目前为止我所看到的)似乎都在推广这种在 Rails 中处理 AJAX 响应的解决方案:为什么？当我检查其他较大的 Rails 项目(例如 Diaspora)的代码时，我似乎没有发现他们这样做 - 他们中的大多数似乎通过 $.ajax({ .. . })。那么 Rails 内部 UJS 方法的主要优点是什么？

2. 如果出于某种原因最好使用 Rails UJS 方式:您如何组织代码？为 *.js.erb 文件创建额外的目录吗？

3. 将所有这些内容传输到位于我的 /app/assets/javascript 目录中的纯 JavaScript 文件并在那里处理 jQuery 中的 AJAX 请求，什么是好的做法？我的 Controller 响应必须是什么样子才能响应 HTML 的适当部分以通过 JS 更新 DOM？换句话说:我怎样才能用我可以在普通 Javascript/jQuery 中处理的部分进行响应？

提前致谢!安迪

Answer 1

那么 Rails 内部 UJS 方法的主要优点是什么？

js.erb 是穷人单页架构 (SPA) 的一种形式。

它使得从 Controller 返回 .js 响应变得非常容易，该响应修改当前页面并允许您使用 Rails 助手进行模板化，这样您就不必使用客户端模板系统，例如 Handlebars 。

请注意，这并不是真正的 Rails 内部。 jQuery UJS simple 利用了 Rails 可以返回资源的多种格式这一事实。您可以将其与任何可以提供 JavaScript 服务的 MVC 框架一起使用。

主要优点是非常平易近人。对于需要一些 ajax 的经典同步应用程序来说，它已经足够了。

它为那些认为 jQuery.load 和无处不在的脚本标签是最好的事情的开发人员提供了帮助，因为切片面包正好有足够的绳子来吊死自己。

缺点

• 违反 REST，因为 js.erb View 通常用作操作当前页面的过程。
• js.erb View 中的 JavaScript 不会被 Assets 管道缩小，因为它按请求提供服务。
• 这会导致糟糕的架构决策。

替代方案是什么？

早在 jquery-ujs 进入场景之前，我们就已经发现执行 ajax 请求的最佳方法是 JSON。

因此，如果您想异步发送表单，您可以这样做:

$(document).on('submit', '.ajax-form', function(e){
  e.preventDefault();
  var $form = $(this);
  var promise = $.ajax($form.attr('action'), {
    accepts: { json: 'application/json' },
    data: $form.serialize(),
    context: $form,
    method: $form.attr('method')
  });
  promise.done(function(response){
    // handle the response
  });
});

这样可以将 JavaScript 逻辑连接到单个文件中，并在 JavaScript 测试工具中单独进行测试。

您的后端服务器仅响应简单的数据，并不关心客户端如何处理它。

但是，这确实需要您在客户端设置某种模板来处理将 JSON 转换为 HTML，并且您需要设置数据绑定(bind)等内容以使表单显示错误。这会导致代码重复。

这就是 Ember 和 Angular 等 SPA 框架发挥作用的地方，它们在客户端中完成所有模板和渲染工作。

我怎样才能用我可以在纯Javascript/jQuery中处理的部分进行响应？

您可以创建 Controller 响应的附加格式。例如，您可以注册一个 "text/html-partial" mime 类型。

或者创建额外的路由，甚至使用查询参数(不寒而栗)。

然而，这并不理想，原因与 js.erb 完全相同 - 它会导致一个蹩脚的 API，因为您的 Controller 将变成面向过程而不是面向资源。您最终将创建荒谬的 Controller 操作，只是为了将 html 片段传递回客户端。