以下_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>

通过控制设备摄像头的Java脚本运行并处理扫描(这是该实例的相关Java脚本代码)

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

日志(log)显示了操作处理,但是without a format pre-defined for the contorller和渲染所需的对象:

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 %>

并且控制台通知通过线路XHRPOSThttp://localhost:3000/carts/6/update_receipt_number [HTTP/1.1 200 OK 357ms]接收具有以下有效载荷的HTML

<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?the same was attempted with a div in lieu of the turbo_frame, leading to identical behaviour

我遗漏了什么?

推荐答案

由于您自己发出了fetch个请求,因此您也必须自己处理响应.换句话说,您已经调用了一个方法,现在必须对返回值执行一些操作.

通常情况下,turbo可以处理细节,但值得庆幸的是,它确实公开了用于手动呈现流的API:

fetch("update_receipt_number", {
  method: "post",
  // format: "turbo_stream", // <= i don't think, this is a thing
  body: formData,
  headers: {
    "X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
    // set Accept header to issue a proper TURBO_STREAM request
    "Accept": "text/vnd.turbo-stream.html"
  }
})
.then(response => response.text())
.then(text => Turbo.renderStreamMessage(text));

100

100

Ruby-on-rails相关问答推荐

如何测试自定义路由?

Rails7--如何使用内联代码仅为操作运行BEFORE操作

如何从 Rails7.2 中的控制器获取名称空间?

是否可以使用 Turbo 帧更新 Rails 表单输入字段值?

Rails:当 id 方法为非标准时构建关联

刺激不添加侦听器以搜索表单输入

BigDecimals 的总和最终成为整数 [Ruby on Rails]

Rails 100% 新手问题 - send() 方法

如何在 YAML 中声明带有单引号和双引号的字符串?

查找日期时间与今天匹配的记录 - Ruby on Rails

如何在 rails 中指定和验证枚举?

如何使用 capistrano deploy 定位特定的提交 SHA

具有条件的列的计数器缓存?

Rails:立即渲染并退出

从 ActiveRecord 对象中提取两个属性的快捷方式?

快速添加链接[:notice]

has_many :通过 class_name 和 foreign_key

如何在 Ruby 中搜索数组?

如何从另一个调用 Capistrano 任务?

为什么 rails bootstrap 这么慢,我该怎么办?