4

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

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

4

2 回答 2

3

当您想从框架外部定位资源时，请记住使用正确的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操作。

您还需要通过执行以下操作告诉您的控制器如何流式传输：

  # 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
于 2021-04-27T12:15:54.823 回答
1

默认情况下，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 处理，通常以意想不到的方式处理。
于 2021-08-04T19:48:53.023 回答