ruby-on-rails Rails 7：Turbo流仅显示部分内容

z4iuyo4d 于 2023-01-03 发布在 Ruby

关注(0)|答案(1)|浏览(182)

我的turbo-rails gem遇到了一个问题。首先，我在我的Rails 7应用程序中安装了最新版本。在我的站点上，我有一个选择输入，它被 Package 在一个表单中，表单下面有一个显示数据的部分。现在，我想使用select应用一个过滤器，并使用这个turbo-rails包动态更新数据。我的表单html如下所示：

<div class="users">
    <div class="filters">
        <%= form_with url: '/users/load', method: :get, data: { turbo_frame: :form_response } do |form| %>
            <%= render partial: "shared/select", locals: {
                placeholder: 'Gender', 
                width: '90px', 
                options: @genders,
                classes: 'filter',
                name: 'gender',
            } %>
            <%= form.submit %>
        <% end %>
    </div>

    <%= turbo_frame_tag :form_response do %>
        <%= render partial: "users/user_list", locals: {
            users: @users
        } %>
    <% end %>
</div>

在我的路由中，我创建了这个get请求，它被转发到我的控制器中的一个load方法，如下所示：

get '/users' => "users#index"
get '/users/load' => "users#load"

然后在我的控制器中，我有两个这样写的方法：

class UsersController < ApplicationController

    before_action :require_user

    USERS_PER_PAGE = 15

    def index
        @genders = ["Male", "Female"]
        @users = User
                            .limit(USERS_PER_PAGE)
                            .order(:creation_date).reverse_order
    end

    def load
        @users = User
                            .limit(USERS_PER_PAGE)
                            .order(:creation_date).reverse_order
                            
        if params[:gender]
            @users = @users.where(gender: params[:gender])
        end

        respond_to do |format|
            format.html { render partial: 'users/user_list', locals: { users: @users } }
        end
    end
end

问题是，当我进入这个页面，选择一个性别，然后点击提交按钮，我可以看到用户数据与正确的性别，但我只看到部分加载，所以页面的其余部分消失了。我可以看到在Chrome开发者工具的网络标签中，请求标题设置为：

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

我想使用turbo流而不是turbo帧，因为我需要在同一个页面上更新更多的这些项目。为什么它不呈现页面内的内容，而只呈现部分内容？
如何解决此问题？

ruby-on-rails

来源：https://stackoverflow.com/questions/74966556/rails-7-turbo-stream-is-showing-partial-only

1条答案

按热度按时间

sd2nnvve1#

为了回答你的问题，你渲染了一个没有turbo流或turbo帧的部分，所以你只得到了一个部分作为响应。
我想，举几个例子就能说明一切。

# config/routes.rb
resources :users

# app/controllers/users_controller.rb
def index
  scope = User.order(created_at: :desc)
  scope = scope.where(name: params[:search]) if params[:search]
  @users = scope
end

"保留日志"在使用turbo帧时非常有用，它可以重定向和清除控制台：

https://developer.chrome.com/docs/devtools/console/reference/#persist*

使用带有 * HTML * 响应的 * GET * 请求加速 * FRAME *

我们正在执行index操作，表单正在提交回index。

# app/views/users/index.html.erb

# expect :users_index turbo frame in a response      vvvvvvvvvvvvvvvvvvvvvvvvv
<%= form_with url: users_path, method: :get, data: { turbo_frame: :users_index } do |f| %>
  <%= f.text_field :search %>
  <%= f.submit %>
<% end %>

# turbo frame in a response needs to match turbo frame on the current page,
# since we're rendering the same page again, we have the matching frame,
# only content inside this frame is updated.
<%= turbo_frame_tag :users_index do %>
  <%= render @users %>
<% end %>

# If you render some other page, you have to wrap it in
# `turbo_frame_tag :users_index`

如果你想更新网址，以及，所以你不会失去搜索刷新：

<%= turbo_frame_tag :users_index, data: { turbo_action: :advance } do %>
  <%= render @users %>
<% end %>

Turbo * STREAM * 使用带有 * TURBO_STREAM * 响应的 * GET * 请求

您必须设置data-turbo-stream="true"以发送 * GET * 流。

# app/views/users/index.html.erb

<%= form_with url: users_path, method: :get, data: { turbo_stream: true } do |f| %>
  <%= f.text_field :search %>
  <%= f.submit %>
<% end %>

<%= tag.div id: :users_index do %>
  <%= render @users %>
<% end %>

添加turbo_stream以响应此请求：

# app/views/users/index.turbo_stream.erb

# update content inside <div id="users_index">
<%= turbo_stream.update :users_index do %>
  <%= render @users %>
<% end %>

# add another `turbo_stream` here if you'd like.

使用 * POST * 请求和 * TURBO_STREAM * 响应增强 * STREAM *

# config/routes.rb

resources :users do
  # # add `search` action
  # post :search, on: :collection

  # i'll be lazy and post to :index
  post :search, action: :index, on: :collection
end

默认情况下，* POST * 表单提交作为 * TURBO_STREAM * 发送，并且将呈现index.turbo_stream.erb。

# app/views/users/index.html.erb

<%= form_with url: search_users_path do |f| %>
  <%= f.text_field :search %>
  <%= f.submit %>
<% end %>

<%= tag.div id: :users_index do %>
  <%= render @users %>
<% end %>

# app/views/users/index.turbo_stream.erb

<%= turbo_stream.update :users_index do %>
  <%= render @users %>
<% end %>

测试设置

只需做一个简单的设置：
一个9个1x一个10个1x一个11个1x

赞(0）回复(0）举报 2023-01-03

我来回答

ruby-on-rails Rails 7：Turbo流仅显示部分内容

1条答案

使用带有 * HTML * 响应的 * GET * 请求加速 * FRAME *

Turbo * STREAM * 使用带有 * TURBO_STREAM * 响应的 * GET * 请求

使用 * POST * 请求和 * TURBO_STREAM * 响应增强 * STREAM *

测试设置

相关问题

热门标签

最新问答