Ссылка на редактирование Rails hotwire не работает после обновления

Question

Я создал небольшое тестовое приложение для изучения hotwire, и у меня возникают проблемы после того, как я нажимаю кнопку обновления, моя кнопка редактирования больше не работает. У меня есть модель вакансий, и в шоу я могу щелкнуть по кнопке редактирования, и турбо-фрейм заменит содержимое формой редактирования. Затем я могу нажать «Обновить», и содержимое шоу будет обновлено без перезагрузки страницы, но кнопка редактирования больше не работает.

Выставка вакансий 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' в эту строку турбо-фреймов? Могу я отключить это, чтобы это заработало?

Answer 1

Если вы хотите настроить таргетинг на ресурс за пределами кадра, не забудьте использовать правильную цель , например:

      <%= 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

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

3. Переместите ссылку за пределы любого турбо-кадра. Любая ссылка внутри кадра Turbo без одного из вышеперечисленных атрибутов будет обрабатываться Turbo по умолчанию, часто неожиданным образом.