Rails 7 Turbo Stream 渲染黑页

Rails 7 Turbo Stream renders black page

提问人:mr_muscle 提问时间:10/7/2023 最后编辑:mr_muscle 更新时间:10/7/2023 访问量:68

问:

在我的 Rails 7 应用程序中,我有一个简单的 Web 表单,用户在其中有一个输入文本字段和提交按钮。用户在字段中提供一些文本并按下提交按钮后,将发送第三方请求以获取图像 URL。成功获取后,获取的图像将显示在表单旁边。这个想法是异步处理表单提交,无需重新加载整页。

我认为这超级简单,检查我的控制器:

class DogsController < ApplicationController
  def index; end

  def fetch_image
    url = fetch_url

    render turbo_stream: turbo_stream.replace('dog_image_frame', partial: 'dog_image', locals: { url: })
  end

  private

  def fetch_url = client.breeds_show(params[:breed]).message
  def client = @client ||= DogCeo::Client.new
end

里面的代码:app/views/dogs/index.slim

.ms-3
  h2.mt-4.mb-5.text-primary
    = t('.header')
  .row
    .col-md-6
      = render Dogs::NewFormComponent.new
    .col-md-6
      = turbo_frame_tag 'dog_image_frame' do
        | No Image Fetched Yet

app/components/dogs/new_form_component.slim:

= form_with url: fetch_image_dogs_path, method: :get, id: 'dog-form' do |f|
  = render(Forms::TextFieldComponent.new(form: f, field: :breed, label: label_text, autofocus: true, required: true, name: 'dog[breed]'))
  = render(Forms::SubmitComponent.new(form: f))

最后:app/views/dogs/_dog_image.slim

img src="#{url}" alt="Fetched Dog Image"

我认为一切都设置正确,我不知道我应该更改什么,因为使用此代码,在用户提交后,我在下面看到带有信息的黑页:

<turbo-stream action="replace" target="users_index"><template><img alt="Fetched Dog Image" src="https://images.dog.ceo/breeds/mastiff-tibetan/n02108551_5216.jpg" /></template></turbo-stream>

enter image description here

[编辑]

服务器日志如下,Web控制台上没有任何错误:

Started GET "/dogs/fetch_image?breed=mastiff&commit=Submit" for ::1 at 2023-10-07 08:57:04 +0200
Processing by DogsController#fetch_image as HTML
  Parameters: {"breed"=>"mastiff", "commit"=>"Submit"}
I, [2023-10-07T08:57:04.255156 #35576]  INFO -- request: GET https://dog.ceo/api/breed/mastiff/images/random
I, [2023-10-07T08:57:04.439900 #35576]  INFO -- response: Status 200
  Rendered dogs/_dog_image.slim (Duration: 2.9ms | Allocations: 2103)
Completed 200 OK in 202ms (Views: 0.3ms | ActiveRecord: 0.0ms | Allocations: 9416)
Ruby-on-Rails Ruby HotWire-Rails 涡轮增压

评论

0赞 Alex 10/7/2023
stackoverflow.com/a/76283733/207090
0赞 mr_muscle 10/7/2023
@Alex这不会改变任何事情。我添加了,但仍然得到相同的结果。data: { turbo_stream: true }form_with
0赞 Alex 10/7/2023
将需要一些细节。像日志一样,你是否得到“处理者......作为TURBO_STREAM“?
0赞 mr_muscle 10/7/2023
@Alex 我不认为你会在这里找到任何有趣的东西,希望我错了。帖子已更新。
1赞 Alex 10/7/2023
你在跑步吗?JavaScript 部分编译成功吗?bin/dev

答: 暂无答案