javascript - 尝试渲染 js.erb 部分模板时出现问题

Question

Rails 版本 6.0.2.1 Ruby 版本 2.6.5

我正在尝试使用 jquery 在我的应用程序的显示 View 中渲染部分内容。

这是我的 JavaScript 文件:

import $ from "jquery";
$(() =>
  $("a#test-button").on("click", ev => {
    ev.preventDefault;
    $("div#teacher-form").html("<%= j render(partial: 'teacher_form') %>");
  })
);

然后我在 View 模板中引用了 javascript，如下所示:

<%= javascript_pack_tag 'test_button' %>
  <%= link_to 'Test',  stakeholder_student_school_year_path, data: { type: :html }, remote: true,  id: 'test-button', class: 'btn btn-info' %>
<div id="teacher-form"></div>

也在我的 Controller 中:

def show
    @teachers = @year.teachers 
    respond_to do |format|
      format.html 
      format.js { 
        render 'student_school_years/_teacher_form', 
        layout: false
       }
    end 
  end

当我单击测试按钮添加部分时，它会在 View 中呈现以下代码片段 <%= j render(partial: 'teacher_form') %> 而不是实际的部分模板。无法弄清楚发生了什么。

Answer 1

您似乎完全误解了 JS.erb 模板的工作原理。

您没有引用 .js.erb模板 javascript_pack_tag 。这是为了引用 Assets 管道中的 Assets 。而且您无法在 Assets 管道中渲染部分内容，因为它们是在部署时编译的。

您刚刚获得文字字符串的原因 "<%= j render(partial: 'teacher_form') %>"问题是 Assets 不是通过 webpack 中的 ERB 发送的。链轮本来可以做到这一点并引发错误。

相反，你可以写你的 js.erb模板，以便它改变页面:

def show
    @teachers = @year.teachers 
    respond_to do |format|
      format.html 
      format.js # renders show.js.erb
    end 
  end

<小时/>

// You can't use imports since this is not run in the assets pipeline
// you have to make jQuery a global
$("#teacher-form").html("<%= j render(partial: 'teacher_form' %>");

当您单击链接时，Rails ujs 驱动程序实际上只是加载该脚本并在页面上对其进行评估。前提是，这可以让您在没有 SPA 框架或实际编写请求处理程序的情况下执行 ajax 请求和 SPA 之类的东西。这是否是个好主意还有待商榷。

我不明白的是，为什么您不首先将表单放在 View 中，然后切换其可见性，而不是让服务器与它同谋，这只是客户端转换。