9

我一直在使用 DHH 提供的演示测试 Hotwire。我有一个默认的 rails 6 设置，并且我知道它会从 rails 5 < 资产管道重新创建 javascript 文件夹结构。我遇到的问题是表单在提交后不会重置文本字段 - 尽管设置了刺激控制器以使用此特定操作。用户提交表单后，如何重置热线表单？我的代码如下

新的.html.erb

<%= turbo_frame_tag 'new_conversation_comment', target: '_top' do %>
<%= form_with(model: [@conversation, @conversation_comment],
              data: { controller: "reset_form", action: 'turbo:submit-end->reset_form#reset' }, html: {class: 'form-inline'}) do |form| %>
    <%= form.submit 'Post', class: 'btn btn-primary mb-2', style: 'float: right;', 'data-reset_form-target': 'button' %>
  
    <div style="overflow: hidden; padding-right: .5em;">
      <%= form.text_field :content, class: 'form-control' %>
    </div>
<% end %>

_conversation_comment.html.erb

 <div class="p-1">
    <%= conversation_comment.content %>
    </div>

显示.html.erb

  <div class="p-2">
     <%= turbo_stream_from @conversation %>
     <%= turbo_frame_tag 'conversation' do %>
         ....
     <% end %>
     <div class="conversation-comments-container" id="conversation_comments">
          <%= render @conversation.conversation_comments %>
     </div>
       <hr>
<%= turbo_frame_tag 'new_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: :_top %>
</div>

资产/javascripts/controllers/reset_form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
    reset() {
        this.element.reset()
    }
}

免责声明：我正在使用 Webpack 4.0

4

4 回答 4

10

根据控制器名称之间的设置下划线可能是一个问题。在我的情况下，用破折号代替它。

turbo:submit-end->reset-form#reset
于 2020-12-31T15:53:45.173 回答
0

免责声明：我使用的是 Webpack 4.0

我也遇到了同样的事情，也使用了 Webpack。

我的解决方案是：

  1. 正如 Canbey 所说，将下划线更改为破折号。

  2. 将刺激控制器从移动app/assets/javascripts/controllers/到app/javascripts/controllers/（有点根据刺激文档，以便 webpack 正确导入它 - 我的application.js文件是从该目录导入控制器而不是app/assets/javascripts.

于 2021-03-22T00:03:08.943 回答
0

半 SJR，半 Hotwire 方法是这样的：

这里的工作示例：https ://rails-react-bootstrap.herokuapp.com/rooms

新的.html.erb

<%= turbo_frame_tag 'new_note' do %>
  <%= form_with model: [@room, @note] do |form| %>
    <!-- Allow body validation error without message -->
    <div class="form-group">
      <%= form.rich_text_area :body, class: 'form-control comments', id: 'bodyText' %>
    </div><!-- .form-group -->
    <div class="form-group d-flex justify-content-center">
      <%= form.submit 'Add Note', class: 'btn btn-lg btn-tayberry btn-block' %>
    </div><!-- .form-group -->
  <% end %>
<% end %>

create_js.erb

// clear note textarea after submit
var input = document.getElementById("bodyText");
input.value = '';

notes_controller

  def create
    @note = @room.notes.create!(note_params)
    # @note.user = current_user
    respond_to do |format|
      if @note.save
        format.turbo_stream
        format.html { redirect_to @room }
        format.js
      else
        format.html { render action: 'new' }
      end
    end
  end
于 2021-09-17T07:28:50.800 回答
-1

如果您仍然需要答案，以下是实现所需目标的方法：

在您的控制器中响应这样的请求：

format.html { redirect_to conversations_url }

注意：重定向到定义 new_conversation_comment 框架的页面（即您提交表单的同一页面）。会发生重定向，但 Hotwire 会用新的形式代替您的形式，并在您指定的地方附加注释。这有点神奇。

我建议你看看这个视频：

https://gorails.com/episodes/hotwire-rails?autoplay=1

于 2021-01-30T17:50:57.903 回答