提问人:mr_muscle 提问时间:10/7/2023 最后编辑:mr_muscle 更新时间:10/7/2023 访问量:68
Rails 7 Turbo Stream 渲染黑页
Rails 7 Turbo Stream renders black page
问:
在我的 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>
[编辑]
服务器日志如下,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)
答: 暂无答案
评论
data: { turbo_stream: true }
form_with
bin/dev