标签: turbo-frames

我有以下代码：

<%= turbo_frame_tag :my_frame do %>
  frame
<% end %>

<%= link_to "About", about_path, data: { turbo_frame: :my_frame } %>

当我单击“关于”链接时，框架的内容不会更新。相反，整个页面导航到about_path。

我知道上面的代码不是问题，因为我在一个新的应用程序上测试了相同的代码并且运行良好。该应用程序的某些内容有所不同，导致该涡轮框架链接无法工作。

有任何想法吗？

我正在尝试在 Rails 应用程序中使用turbo_frame_tag 来管理一些任务。我为我的任务创建了一个脚手架。

我将要使用的页面包装在 Turbo 框架标签内，如下所示：

<%= turbo_frame_tag "modal" do %>

      <h1>New task</h1>
      <%= render "form", task: @task %>
      <br>
      <div>
        <%# <%= link_to "Back to tasks", tasks_path %> %>
        <%= link_to "Cancel", "#", data: {
          controller: "modals",
          action: "modals#close"
        }, class: "cancel-button" %>
      </div>

<% end %>

在此输入图像描述

在我的主页 index.html.erb 文件中，我使用相同的标签将数据添加到“添加”按钮：

<%= link_to "Add", new_task_path, data: { turbo_frame: "modal" }, class: "btn btn-secondary", remote: true %>

该模式工作正常。当我单击主页上的“添加”按钮时，它将打开。当我尝试提交操作来创建新任务时，我在终端上看到 200 响应，并且新任务已添加到我的数据库中。

但是（也）我在主页上收到“内容缺失”文本信息。该页面未重新加载。在开发者浏览器中我收到此错误：

<%= turbo_frame_tag "modal" do %>

      <h1>New task</h1>
      <%= …

我有

• 1：turbo 框架中的链接，可将表单加载到同一框架中。工作顺利
• 2：如果表单无效，则只能通过用错误标记缺失字段来更新自身。工作顺利
• 3：如果表单提交成功，我应该重定向，这效果不好，因为它正在渲染重定向的结果as TURBO_STREAM，在这种情况下我应该以某种方式突破到顶部。

基本上这是代码：

- list_of_projects...
= turbo_frame_tag 'new_project'
  = link_to "New Project", new_project_path

然后views/projects/new.html.slim我有：

= turbo_frame_tag 'new_project' do
  = simple_form_for @project_form, url: projects_path do |form|
...

然后在控制器中：

  def create
    @project_form = ProjectForm.new project_params
    if @project_form.valid?
      command_bus.(Conversations::Commands::CreateProject.new(id: SecureRandom.uuid,
                                                          title: @project_form.title))

      # should redirect without AS Turbo
      redirect_to projects_url

有什么想法如何以可重用的方式做到这一点吗？

我在使用 Turbo Frames 设置 Devise 注册表单时遇到问题。我希望将 Devise 注册表单设置为“逐步参与”表单，只需要电子邮件即可从主页注册新用户。

到目前为止我的设置方式如下：

• 首先，我使用此解决方法来获取与 Hotwire 一起使用的默认 Devise 视图。
• 然后，我使用这种方法让设计注册表单在我的主页上运行
• 最后，我使用此方法在 Devise 中设置了仅电子邮件注册。

这一切都按预期工作，但是当用户完成注册时，它会重定向并显示 Flash 页面。相反，我想使用 Turbo Frames 将表单替换为“感谢您注册”之类的消息，而无需重新加载任何页面或进行重定向。

此外，如果表单中存在任何错误（例如电子邮件为空），它会重定向到默认的设备注册视图并在那里显示错误。我希望这种情况发生在主页框架内，这样当显示错误时就不会重新加载页面。

那么，我该如何使用 Devise 和 Turbo Frames 来做到这一点呢？

这是在主页上运行的表单：

<%= form_for resource, :as => resource_name, :url => registration_path(resource_name), html: { class: "sm:flex" } do |form| %>
  <%= form.label :email, class: "sr-only" %>
  <%= form.email_field :email %>
  <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
    <%= form.submit "Subscribe" %>
  </div>
<% end %> …

我正在学习 Turbo Frames 和 Streams + Stimulus，所以我可能没有 100% 步入正轨。我有一个用于创建新对象的表单，但在表单中我希望有一个选择组件，该组件将根据选择显示某些字段。值得注意的是，因此，在用户做出此选择之前我不想提交表单。

这就是我所拥有的：

_form.html.erb

<div class="form-group mb-3">
   <%= form.label :parking, class: 'form-label' %>
   <%= form.number_field :parking, class: 'form-control' %>
</div>

<%= turbo_frame_tag "turbo_transactions" do %>
   <%= render 'property_transactions' %>
<% end %>

_property_transactions.html.erb

<div class="form-group mb-3" data-controller="property-transaction">
    <%= label_tag :property_transactions, 'Property in:', class: 'form-label' %>
    <%= select_tag :property_transactions, options_for_select(@property_transactions.collect {|p| [p.name, p.id]}), { data: 
    { action: "property-transaction#redraw", property_transaction_target: 'transaction', turbo_frame: 'turbo_transactions' }, 
        class: 'form-control', prompt: '', autocomplete: 'off' } %>
</div>

<% if …

问题：Turbo 只是将服务器的响应附加到当前页面的末尾。没有像预期那样替换页面。

最近从 Rails 6 升级到 7。我还从 importmap 切换到 esbuild。

我有一个正在向创建方法发布帖子的表单。控制器响应

  if @stamp.save       
        redirect_to stamps_path, notice: "Input saved"
      else

发生的奇怪的事情是响应从顶部附加到源代码的底部。因此，在原始源代码的末尾附加了响应中的新头部部分，如下所示

<...> The whole initial html <...>
</body>
<title>Page title</title> <-- The server response gets appended after </body>
<meta .... the whole page gets repeated again

不太确定要在这里向您展示什么，一直在研究所有设置等。我从未见过 Turbo 有这样的响应行为。

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"
gem "rails", "~> 7.0.2", ">= 7.0.2.4"
gem "sprockets-rails"
gem "puma", "~> 5.6"
gem "haml-rails", "~> 2.0"
gem "sqlite3", "~> 1.4"
gem 'devise', '~> …

我正在尝试将 Hotwire/Turbo 合并到现有的 Rails 应用程序中。我已将涡轮框架添加到简单的编辑页面，但现在当我单击后退按钮时，它会消失而不是带我到目标页面。该链接很简单link_to "Back", my_model_show_path(model_instance)。

我看到网络请求发生并且成功。DevTools 的“网络”选项卡中的页面预览显示正在加载并呈现为 html 的正确页面。浏览器只是不带我到新位置。

我怎样才能像以前一样工作？我觉得即使我使用 Hotwire/Turbo，我也应该能够使用常规链接重定向应用程序中的任何位置。

我在 Rails 应用程序中使用 Turbo Frames，并且在每个页面上都有

<turbo-frame id="messagesFrame" src="/chats">
</turbo-frame>

这可以很好地加载，并且当单击链接时会按预期替换框架。在这个框架中，我设置overflow-y: scroll了在页面上创建一个可滚动框架。每次在框架中加载新页面时，我都希望它滚动到底部。我怎样才能做到这一点？理想情况下使用香草 JavaScript。