标签: hotwire-rails

我有一个表单，我想在任何输入字段发生更改时自动提交。我正在使用 Turbo Streams，如果我使用onchange: "this.form.submit()"它，它不会被 Turbo Streams 捕获，并且 Rails 使用标准 HTML 响应。单击提交按钮时效果很好。我该如何解决这个问题？

我对 Rails 很陌生。我是从 Rails 7 开始的，所以关于我的问题的信息仍然很少。

这是我所拥有的：

应用程序/模型/cocktail.rb

class Cocktail < ApplicationRecord
  has_many :cocktail_ingredients, dependent: :destroy
  has_many :ingredients, through: :cocktail_ingredients
  accepts_nested_attributes_for :cocktail_ingredients
end

应用程序/模型/ingredient.rb

class Ingredient < ApplicationRecord
  has_many :cocktail_ingredients
  has_many :cocktails, :through => :cocktail_ingredients
end

应用程序/模型/cocktail_ingredient.rb

class CocktailIngredient < ApplicationRecord
  belongs_to :cocktail
  belongs_to :ingredient
end

应用程序/控制器/cocktails_controller.rb

def new
  @cocktail = Cocktail.new
  @cocktail.cocktail_ingredients.build
  @cocktail.ingredients.build
end


def create
  @cocktail = Cocktail.new(cocktail_params)

  respond_to do |format|
    if @cocktail.save
      format.html { redirect_to cocktail_url(@cocktail), notice: "Cocktail was successfully created." }
      format.json { render :show, status: …

我正在开始使用 Rails 6 中的 Hotwire 和 Turbo，但遇到 Turbo 无法替换我的 Turbo 框架的问题。我收到以下错误消息：Response has no matching <turbo-frame id="experiments"> element。

我通过控制器操作在页面上呈现以下内容：

<!-- index.html.erb -->
<turbo-frame id="experiments" src="/labs/experiments">
  <p>This message will be replaced by the response from /labs/experiments.</p>
</turbo-frame>

这正确地将请求发送到/labs/experiments，当我检查我的网络请求时，我的控制器返回以下内容：

<h2>Experiment 1</h2>
<h2>Experiment 2</h2>

但是，响应不会在我的涡轮框架内呈现，而是收到控制台日志警告：Response has no matching <turbo-frame id="experiments"> element。

如有任何帮助，我们将不胜感激:)

我正在尝试在 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>
      <%= …

我开始使用 hotwire/turbo 并已设置好一切。Turbo 流工作正常。

在index.html.erb中：

<h1>Tasks</h1>
<%= turbo_stream_from "tasks" %>

<div id="tasks">
  <% @tasks.each do |task| %>
    <%= render task %>
  <% end %>
</div>

在 _task.html.erb 内

<%= turbo_frame_tag dom_id(task) do %>
  <%= link_to 'Edit', edit_task_path(task) %>
  <%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %>
  <hr>
<% end %>

当按预期按下销毁按钮时，rails 控制台会显示：

Started DELETE "/tasks/41" for ::1 at 2021-12-14 18:40:32 +0000
Processing by TasksController#destroy as TURBO_STREAM

但是当按下编辑按钮时，rails 控制台会显示：

Started GET "/tasks/41/edit" for ::1 at …

将 format.html 和 format.turbo_stream 响应保留在所有控制器响应的 respond_to 块中是否是最佳实践？是否存在仅包含turbo_stream 响应是安全的场景？

Hotwire 文档指出：

\n

在不使用 Turbo Streams 的情况下开始交互设计是一个很好的做法。让整个应用程序像 Turbo Streams 不可用时一样工作，然后将它们分层作为升级。这意味着您\xe2\x80\x99不会依赖需要在本机应用程序或其他没有它们的其他地方工作的流程的更新。

\n

对于 WebSocket 更新尤其如此。如果连接状况不佳，或者存在服务器问题，您的 WebSocket 很可能会断开连接。如果应用程序设计为在没有它的情况下工作，那么它\xe2\x80\x99 将更具弹性。

\n

我假设这意味着我们应该始终使用非 Turbo Stream 响应、错误处理等作为后备？

我在我的 #index 页面之一成功实现了 Turbo Streams。我有一个表，其中的行代表集合中的每个模型，每行中都有操作按钮，可以让用户更新模型。以前，按钮链接到单独的 #edit 表单页面，然后是 #show 的标准 CRUD 流程、错误处理等。现在，使用 Turbo Streams，用户可以在不离开 #index 表视图的情况下更新行。太棒了。我希望摆脱旧的视图页面，但想知道是否需要保留它们作为后备。

我最近将 Hotwire 添加到我的 Rails 应用程序中以更新模态，但这破坏了我将用户重定向到 stripe 的 link_to 。我在网上寻找解决方法，但由于 Hotwire 相对较新，我找不到它。有人对让 link_to 使用 Turbo 流有什么建议吗？

我已在现有 Rails 项目中安装了 hotwire-rails。在编写任何与热线相关的代码之前，我在每个页面的浏览器控制台上都会收到以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module在application.debug-86...95.js:53462

错误所指的行是这样的：

import { Controller } from "@hotwired/stimulus"

我使用 Rails 6.1.3.1 和 Sprockets 作为资源，之前我只在使用 webpack 的 Rails 项目中使用过 hotwire，所以不确定这是否与它有关。

在turbo访问后不会触发turbo:load事件（正如文档所说的那样）。在初始整页加载后，它会按预期工作。我可以捕获“turbo:before-fetch-response”事件，但我对turbo:load、:render、:frame-render、:frame-load 没有运气。

我的 Turbo_stream 请求格式为 TURBO_STREAM 以销毁附件。控制器响应为

respond_to do |format|
  format.turbo_stream do
    render 'attachments/delete_document',
               locals: { target: "docs-list-#{img.id}" }
  end
end

我返回两个涡轮流，其更新和删除操作按预期工作：

<turbo-stream action="remove" target="<%= target %>">
  <template></template>
</turbo-stream>

<turbo-stream action="update" target="flash_messages">
<template>
  <%= render partial: 'layouts/flash', formats: :html,
             locals: { type: :notice,
                       message: 'Attachment removed.' } %>
</template>
</turbo-stream>

（注意：这是另一篇文章的一个亮点。那里提出的解决方案在我的情况下不起作用，因为完整属性仅存在于HTML img 元素。）（我正在使用@hotwired/turbo@^7.1.0，@ Rails 7.0.1 中的 hotwired/turbo-rails@^7.1.1)

嘿，我是 Turbo_streams 的新手，我一直不明白为什么会收到此错误。

属性部分：

<div id="properties"
     data-action="map-marker-clicked@window->@mapmarker#mapMarkerClicked"
     data-controller="mapmarker"
     data-mapmarker-target="properties_list">
  <%= "#{@properties.length} properties" %>

  <%= turbo_stream_from "properties" %>
  <%= turbo_frame_tag "properties" do %>
    <% @properties.each do |property| %>
      <%= render property %>
      <p>
        <%= link_to "View this property", property %>
      </p>
    <% end %>
  <% end %>
</div>

还有我的控制器：

  def index
    @properties = location_search? ? Property::SearchByLocation.call(search_params[:value]) : Property.all

    @markers = Property::GenerateGoogleApiMapMarkers.call(property_or_properties: @properties)

    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(@properties, partial: 'properties/properties')
      end
    end
  end

更多上下文：我计划从刺激控制器触发此重新加载（当用户单击谷歌地图上的标记时，我想使用标记的坐标刷新属性部分作为组织属性的方式（最接近标记将显示在顶部）。

当我访问 http://localhost:3000/properties 时，出现 ActionController::UnknownFormat 错误