我有下一个"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>
我有下一个"views/pages/about.html.erb":
<div class="flex flex-col">
<h1>Hello</h1>
<div>
我想当用户点击关于链接在_breadcrumb.html。在<%= yield %>中渲染about.html.erb页面，当然使用turbo帧，避免重新加载页面。
我也得到这个错误在控制台:
Response has no matching <turbo-frame id="main"> element
在这里实际上并不需要Turbo frame。你想要的只是涡轮驱动，它在所有链接上默认启用。
驱动器用于访问另一个页面并更新页面历史记录。这和涡轮链接很像涡轮链接就是由它进化而来的。它通过XHR请求获取页面，然后用新页面替换文档的内容，并使用history.pushState更新浏览器历史记录。这避免了从头开始重建整个文档并再次协商所有资产(CSS, JS，图像)所涉及的开销。
虽然你可以在这里使用Turbo Frame YAGNI，但它实际上会导致糟糕的用户体验/可访问性，因为访问不同的页面不会更新历史记录(如果页面要刷新的话真的很烦人)，不会更新标题-等等。
Turbo帧用于将页面分解为独立更新且不构成访问另一个页面的单独帧。例如，经典的注释表单将注释添加到注释列表中，而无需重新加载。可以把它看作嵌入到页面中的模块，而不是替换页面的主要内容。