Rails 热线编辑链接在更新后断开答案

【问题标题】：Rails hotwire edit link broken after updateRails 热线编辑链接在更新后断开
【发布时间】：2021-07-20 10:27:07
【问题描述】：

我创建了一个小型测试应用程序来探索热线，但在单击更新后我遇到了问题，我的编辑按钮不再起作用。我有一个工作模型，在节目中我可以单击编辑，涡轮框架将用编辑表单替换内容。然后我可以点击更新并更新显示内容而无需重新加载页面，但编辑按钮不再起作用。

工作展示ERB

<p id="notice"><%= notice %></p>
<%= Time.now %>

<%= turbo_stream_from @job %>

<%= turbo_frame_tag dom_id(@job) do %>
  <%= render "job_show", job: @job %>

  <%= link_to 'Edit', edit_job_path(@job) %> |
  <%= link_to 'Back', jobs_path, 'data-turbo-frame': :_top %>
<% end %>

职位展示部分

<div id="<%= dom_id job %>" class="job">
  <p>
    <strong>Code:</strong>
    <%= job.code %>
  </p>

  <p>
    <strong>Name:</strong>
    <%= job.name %>
  </p>
</div>

工作控制器

  # PATCH/PUT /jobs/1 or /jobs/1.json
  def update
    respond_to do |format|
      if @job.update(job_params)
        format.html { redirect_to @job, notice: "Job was successfully updated." }
        format.json { render :show, status: :ok, location: @job }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @job.errors, status: :unprocessable_entity }
      end
    end
  end

工作模式

class Job < ApplicationRecord

  # We're going to publish to the stream :jobs
  # It'll update the element with the ID of the dom_id for this object,
  # Or append our jobs/_job partial, to the #jobs <tbody>

  broadcasts_to -> (job) {:jobs}
end

我注意到当它处于错误状态并且我无法点击“编辑”按钮时，如果我在浏览器中使用检查可以更改 turbo_frame 行，它就会起作用；

来自

<turbo-frame id="job_7" src="http://localhost:3001/jobs/7">

到

<turbo-frame id="job_7">

是什么将“src”选项放在涡轮框架线上？我可以禁用它以使其正常工作吗？

完整代码：https://github.com/map7/hotwire_jobs_example

【问题讨论】：

标签： ruby-on-rails hotwire-rails

【解决方案1】：

当您想从框架外定位资源时，请记住使用正确的target，如：

<%= turbo_frame_tag dom_id(@job), target: '_top' do %>
  <%= render "job_show", job: @job %>

  <%= link_to 'Edit', edit_job_path(@job) %> |
  <%= link_to 'Back', jobs_path, 'data-turbo-frame': :_top %>
<% end %>

这将帮助您处理 Edit 和 Back 操作。

您还需要告诉您的控制器how to stream，方法是：

  # PATCH/PUT /jobs/1 or /jobs/1.json
  def update
    respond_to do |format|
      if @job.update(job_params)
        format.turbo_stream
        format.html { redirect_to @job, notice: "Job was successfully updated." }
        format.json { render :show, status: :ok, location: @job }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @job.errors, status: :unprocessable_entity }
      end
    end
  end

【讨论】：

在我添加这个之前，我可以去一个工作的显示页面，点击编辑，点击更新，然后我不能再次点击编辑，但一切正常。现在有了这个我可以去工作的显示页面，点击编辑，然后当点击“更新”时，视图停留在编辑表单上。项目在后台更新，但视图未更新。

【解决方案2】：

默认情况下，Turbo 框架内的任何链接都将由 Turbo 处理。我不认为操纵 src 属性真的是你的问题。

您可以通过三种方式恢复常规（非 Turbo）链接行为。

1：设置data-turbo属性。

<%= link_to "Click Here", path_helper_method, data: { turbo: false } %>
(or in plain html)
<a href="" data-turbo="false">

2：设置目标属性。

<%= link_to "Click Here", path_helper_method, target: "_top" %>
(or in plain html)
<a href="" target="_top">

将链接移到任何 Turbo 框架之外。 Turbo 框架内的任何链接，如果没有上述属性之一，将默认由 Turbo 处理，通常以意想不到的方式处理。

【讨论】：