Rails hotwire编辑链接在更新后断开

Question

我已经创建了一个小的测试应用程序来探索hotwire，在我点击更新后遇到了问题，我的编辑按钮不再起作用。我有一个作业模型，在显示中，我可以单击编辑，turbo框架将用编辑表单替换内容。然后我可以点击更新，显示内容就会更新，而不需要重新加载页面，但编辑按钮不再起作用。

工作展示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

我注意到，当它处于错误状态时，我不能点击“编辑”按钮，如果我在浏览器中使用inspect可以更改turbo_frame行，那么它就可以工作；

从…

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

至

<turbo-frame id="job_7">

什么是把'src‘选项放到那条turbo-frame线路上？我可以禁用它来让它工作吗？

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

Answer 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

Answer 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">

1. 将链接移到任何Turbo帧之外。默认情况下，没有上述属性的Turbo帧中的任何链接都将由Turbo处理，通常会以意想不到的方式进行处理。