Ruby on Rails 7中的Hotwire Turbo如何在HTML表格中使用？

Question

Ruby on Rails 7中的Hotwire Turbo如何在HTML表格中使用？

3

我有一个简单的 Ruby on Rails 7 应用程序，使用 Hotwire 和 turbo frames。我在我的索引页上有一个 HTML 表格，并希望使用 turbo frame 标记来制作它，以便所有操作都保留在索引页上。

这是索引文件：

<%= turbo_stream_from "companies" %>
<main class="container">
  <div class="header">
    <h1>Companies</h1>
    <%= link_to "Add company",
                new_company_path,
                class: "btn btn--primary",
                data: { turbo_frame: dom_id(Company.new) } 
                %>
  </div>

  <%= turbo_frame_tag Company.new %>

    <div class="table-responsive">
    <table class="table mb-0">
      <thead>
        <tr>
          <th><%= sort_link(@q, :company_name) %></th>
          <th><%= sort_link(@q, :street_address) %></th>
          <th><%= sort_link(@q, :postal_code) %></th>
          <th><%= sort_link(@q, :city) %></th>
          <th><%= sort_link(@q, :country) %></th>
          <th colspan= 2> Action</th>
        </tr>
      </thead>
      <tbody id="companies_table">
        <%= render @companies %>
      </tbody>
    </table>
    </div>

  <%= raw pagy_nav(@pagy) %>
</main>

这是 _company.html.erb 部分：

<%= content_tag :tr, id: dom_id(company) do %>
  <td><%= company.company_name %></td>
  <td><%= company.street_address %></td>
  <td><%= company.postal_code %></td>
  <td><%= company.city %></td>
  <td><%= company.country %></td>
  <td>
    <%= link_to edit_company_path(company), class: "btn btn--light" do %>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-pencil-square svg-icon" viewBox="0 0 16 16">
          <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
          <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
        </svg>
      <% end %>
  </td>
  <td>
      <%= button_to company_path(company), method: :delete, class: "btn btn--light" do %>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash svg-icon" viewBox="0 0 16 16">
          <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
          <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
        </svg>
      <% end %>
  </td>
<% end %>

这里是 create.turbo_stream.erb 文件：

<%= turbo_stream.prepend "companies_table", @company %>
<%= turbo_stream.update Company.new, "" %>
<%= render_turbo_stream_flash_messages %>

是否有可能让这个表格变得动态，在创建新记录后将行添加到表格中。

谢谢。

附注：如果我漏掉了重要的一环，请告诉我。谢谢。

- Volkan

应该可以正常工作。在您的创建操作中添加 format.turbo_stream。 - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bar-Levav · Accepted Answer

我要提到的是，Turbo和Tables存在已久的问题，仍然没有得到很好的解决，可以从以下链接中看到 Turbo repo上的问题线程。可悲的是，这个问题仍然没有解决。我提供的链接中确实提供了一些解决方案。或者，您也可以忽略语义正确的HTML，使用

元素构建表格，并按照自己的样式进行设置。很抱歉这个问题仍然困扰着您，但您并不孤单。

更新：

我见过一个可以工作的实现，尽管is关键字目前在safari中不受支持。看看像这样的东西是否适合您：

# index.html.erb
<table class="min-w-full divide-y divide-gray-300">
  <thead class="bg-gray-50">
  <tr>
    <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-normal text-gray-900 sm:pl-6">Name</th>
    <th scope="col" class="px-3 py-3.5 text-left text-sm font-normal text-gray-900">Email</th>
    <th scope="col" class="px-3 py-3.5 text-left text-sm font-normal text-gray-900">Date Added</th>
  </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 bg-white" is="turbo-frame" id="users">
    <%= render @users %>
  </tbody>
</table>

# _user.html.erb
<tr is="turbo-frame" id="<%= dom_id(user) %>">
  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm">
    <div class="flex items-center">
      <div class="h-10 w-10 flex-shrink-0">
        <%= user.avatar %>
      </div>
      <div class="ml-4">
        <div class="text-gray-500"><%= user.title %></div>
      </div>
    </div>
  </td>

  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"><%= user.email %></td>
  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"><%= user.date %></td>
</tr>

# users_controller.rb
def create
  ...
  respond_to do |f|
    f.turbo_stream do
      flash.now[:notice] = "Created!"
      render turbo_stream: turbo_stream.after(:users, partial: "users/user", locals: { user: user },)
    end
  end
end