ruby-on-rails 如何正确使用turbo帧？

我有下一个“controllers/pages_controller.rb”：

class PagesController < ApplicationController
  def home
  end

  def stack
  end

  def about
  end
end

我有下一个“路线”：

Rails.application.routes.draw do
  root "pages#home"
  get 'home', to: 'pages#home'
  get 'about', to: 'pages#about'
  get 'stack', to: 'pages#stack'
  get 'projects', to: 'projects#index'
end

我有下一个“layouts/application.html.erb”：

<!DOCTYPE html>
<html>
  <head>
    <title>Daniel Enqz</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <main class="container mx-auto mt-14 px-5">
      <%= render 'shared/breadcrumb' %>
      <div class="mt-10 h-screen grid content-start">
        <%= turbo_frame_tag "main" do %>
          <%= yield %>
        <% end %>
      </div>
    </main>
  </body>
</html>

我有下一个“views/shared/_breadcrumb.html.erb”：

<nav aria-label="breadcrumb" data-controller="breadcrumb" id="breadcrumb">
  <ol class="inline-flex items-center space-x-4 py-2 text-lg font-medium">
    <li class="inline-flex items-center">
      <a href="" class="text-slate-900 hover:text-cyan-400">@dan </a>
    </li>
    <li class="inline-flex items-center space-x-4">
      <span class="text-secondary-400">/</span>
      <%= link_to "Home", home_path, class: "text-slate-400", data: { action: "breadcrumb#toggle", turbo_frame: "main" } %>
    </li>
    <li class="inline-flex items-center space-x-4" aria-current="page">
      <span class="text-secondary-400">/</span>
      <%= link_to "Projects", projects_path, class: "text-slate-400", data: { action: "breadcrumb#toggle", turbo_frame: "main" } %>
    </li>
    <li class="inline-flex items-center space-x-4" aria-current="page">
      <span class="text-secondary-400">/</span>
      <%= link_to "Stack", stack_path, class: "text-slate-400", data: { action: "breadcrumb#toggle", turbo_frame: "main" } %>
    </li>
    <li class="inline-flex items-center space-x-4" aria-current="page">
      <span class="text-secondary-400">/</span>
      <%= link_to "About", about_path, class: "text-slate-400", data: { action: "breadcrumb#toggle", turbo_frame: "main" } %>
    </li>
  </ol>
</nav>

我有下一个“视图/页面/about.html.erb”：

<div class="flex flex-col">
  <h1>Hello</h1>
<div>

我希望当用户点击_breadcrumb.html.erb中的about链接时，about.html.erb页面会以〈%= yield %〉的格式呈现，当然要使用turbo帧并避免重新加载页面。

我也得到这个错误在控制台：

Response has no matching <turbo-frame id="main"> element

你实际上并不需要Turbo Frames，你需要的只是Turbo Drive和它在所有链路上的默认启用。
当你想访问另一个页面并更新页面历史记录时，可以使用Drive。这与Turbo的前身Turbolinks非常相似。它通过XHR请求获取页面，然后用新页面替换文档的内容，并使用history.pushState更新浏览器历史记录。这避免了从头重建整个文档和协商所有资产所带来的开销（CSS、JS、图像）。
虽然你可以在这里使用一个涡轮帧YAGNI，它实际上会导致一个坏的用户体验/可访问性，因为访问不同的页面不会更新历史（真的很烦人，如果页面在哪里刷新），不更新标题等。
Turbo frames用于将页面分解为单独的框架，这些框架可以独立更新，并且不需要访问其他页面。例如，经典的评论表单可以将评论添加到评论列表中，而无需重新加载。可以将其视为嵌入页面中的模块，而不是替换页面的主要内容。

ruby-on-rails 如何正确使用turbo帧？

1条答案

相关问题

热门标签

最新问答