下面的_receipt_number
部分代码(为简洁起见,删除了HTML格式化标记)
<%= turbo_frame_tag :receipt_number do %>
<%= t('scan') %> <%= t('cart.receipt_number') %>
<h3><%= @cart.receipt_number %></h3>
<% if @cart.receipt_number %>
<%= button_to t('change'), clear_receipt_number_cart_path(id: @cart.id), class: 'button warning', method: :patch %>
<% end %>
<% end %>
在HTML中呈现为:
<turbo-frame id="receipt_number">
scan receipt number
<h3></h3>
</turbo-frame>
通过控制设备摄像头的JavaScript运行并处理扫描(这是示例的相关JavaScript代码)
let formData = new FormData();
let CodeParams = {
code_data: result.text,
id: <%= @cart.id %>
};
formData.append("code_json_data", JSON.stringify(CodeParams));
fetch("update_receipt_number", {
method: "post",
format: "turbo_stream",
body: formData,
headers: {
"X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
}
});
codeReader.reset();
通过控制器操作:
@cart.update(receipt_number: result['code_data'])
respond_to do |format|
format.turbo_stream
end
日志显示操作处理,但是没有为控制器预定义的格式并呈现所需的对象:
Started POST "/carts/6/update_receipt_number" for 127.0.0.1 at 2023-02-27 08:24:38 +0100
Processing by CartsController#update_receipt_number as */*
Cart Update (9.6ms) UPDATE "carts" SET "updated_at" = $1, "receipt_number" = $2 WHERE "carts"."id" = $3
Rendering carts/update_receipt_number.turbo_stream.erb
Rendered carts/_receipt_number.html.erb (Duration: 0.8ms | Allocations: 349)
Rendered carts/update_receipt_number.turbo_stream.erb (Duration: 1.9ms | Allocations: 663)
turbo_stream. erb响应设置为:
<%= turbo_stream.replace :receipt_number do %>
# replacing the partial with turbo
<%= render partial: 'carts/receipt_number', locals: {cart: @cart} %>
<% end %>
并且控制台通知HTML通过线路XHRPOSThttp://localhost:3000/carts/6/update_receipt_number [HTTP/1.1 200 OK 357ms]
接收,有效载荷如下
<turbo-stream action="replace" target="receipt_number"><template>
# replacing the partial with turbo
<turbo-frame id="receipt_number">
scan receipt number
<h3>20230224T12423036270004131601843bbaa16909b1b07b2c32414fdea5092de2769aabaa2f610860c827f27fb386d4</h3>
<form class="button_to" method="post" action="/carts/6/clear_receipt_number"><input type="hidden" name="_method" value="patch" autocomplete="off" /><button class="button warning" type="submit">change</button><input type="hidden" name="authenticity_token" value="DKVdhPK4UfmY_PzvA2amrvh9IejYEnyjHrJQANs0rlj6HHNAZjk3n6zxAgHRg0s27SWwgPZxMXOuLDiqSn6oQw" autocomplete="off" /></form>
</turbo-frame>
</template></turbo-stream>
但浏览器窗口不会更新。
我不认为控制器缺少请求类型是原因,因为响应到达浏览器。那么为什么浏览器不刷新turbo_frame?* 我们尝试用div代替turbo_frame,导致相同的行为 *
我错过了什么?
1条答案
按热度按时间093gszye1#
由于是您自己发出
fetch
请求,因此也必须自己处理响应,换句话说,您已经调用了一个方法,现在必须对返回值做一些事情。通常情况下,turbo 会处理细节,但值得庆幸的是,它确实公开了一个API,用于手动渲染流: