ruby-on-rails Turbo Rails路由问题

b09cbbtk  于 2023-04-22  发布在  Ruby
关注(0)|答案(1)|浏览(173)

我很难理解Turbo在Rails中是如何工作的,以及为什么我在点击<%= link_to dashboard_path %>后会被重定向到一个不是 Jmeter 板的视图。
dashboard_path是一个有效的helper。我已经通过运行rails routes并获得以下内容进行了验证:dashboard GET /dashboard(.:format) dashboard#index
我得到的是这个:

但我应该得到的( Jmeter 板)是这样的:

首先,请注意第三列中的差异。
以下是在使用<%= link_to dashboard_path %>进入视图之前,视图在应用程序中的呈现方式:
views/layout/applications在用户登录并创建用户名后接收发送给它的任何内容,并将侧边栏附着到它,以便它们一起显示。

<% if user_signed_in? %>
  <% if controller_name == "usernames" %>
    <%= yield %>
  <% else %>
   <div class="container py-2 border border-dark">
    <div class="d-flex flex-row">
     <%= render "shared/sidebar" %>
     <%= yield %>
    </div>
   </div>
  <% end%>
      
<% else %>
 <%= yield %>
<% end%>

在这种情况下,yield语句将引用views/dashboard/index中的内容。这里我们有:

<div class="mb-4">
    <%= link_to "Home", dashboard_path %>
  </div>
  <div class="mb-4"> 
    <%= render "shared/tweet_form" %>
  </div>
  <div id="tweets">
    <%= render partial: "tweets/tweet", collection: @tweets, as: :tweet_presenter %>
  </div>
</div>
 
<div class="col-3">
  <h4>This is the Dashboard third column</h4>
</div>

上一个视图中的<%= render partial: "tweets/tweet", collection: @tweets, as: :tweet_presenter %>将呈现views/tweets/tweet,其结构如下:

<%= turbo_frame_tag dom_id(tweet_presenter.tweet) do %> 
…
    <%= link_to tweet_path(tweet_presenter.tweet), target: :_top do %>
          <%= image_tag "speech.png", size: "20x20", class: "me-1" %>
          <span>Replies<span>
        <% end %>
…
<% end %>

最后,当单击link_to tweet_path(tweet_presenter.tweet)时,将转到views/tweets/show

<%= turbo_frame_tag dom_id(@tweet) do %>
  <%= link_to dashboard_path do %>
     <%= image_tag "back-arrow.png", size: "30x30" %>
     <span>Tweet</span>
  <% end %>
  <%= @tweet.body %>
<% end %>

<div>
  <h4>This is the Show third column</h4>
</div>

在这一点上,点击<%= link_to dashboard_path do %>将我们带到麻烦的视图(第一个屏幕截图),它似乎是views/tweets/show的混合体,而不是 Jmeter 板。
我试着改变链接,因此<%= link_to :back do %>,都无济于事:我也得到了同样的结果。我不知道该从何说起,因为我不明白这是怎么回事。

vc6uscn9

vc6uscn91#

<%= turbo_frame_tag dom_id(@tweet) do %>
  <%= link_to dashboard_path do %>

您正在tweet turbo框架内导航。在 Jmeter 板页面上,您正在呈现:

<%= turbo_frame_tag dom_id(tweet_presenter.tweet) do %>

并且它将匹配当前的turbo帧,因此整个中间列仅由单个tweet替换。
您需要将该链接移动到turbo帧之外或指定data-turbo-frame属性:
https://turbo.hotwired.dev/reference/attributes

<%= link_to dashboard_path, data: {turbo_frame: :_top} do %>
  ...

记录turbo帧头可能很有用,这样您就可以知道何时以及正在导航的帧:

# config/environments/development.rb

ActiveSupport::Notifications.subscribe("start_processing.action_controller") do |name, start, finish, id, payload|
  if payload[:headers]["Turbo-Frame"]
    Rails.logger.debug do
      "\e[0;35mTurbo-Frame:\e[0m #{payload[:headers]["Turbo-Frame"]}"
    end
  end
end

请注意,target: :_top用于<turbo-frame>标签,在链接上它不是turbo属性:

  • 网址:http:developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes*

相关问题