Hotwire published by DHH brother, I thought it would be convenient to reflect real-time updates with Websocket, but when I touched it for a moment, when I get HTML without screen transition with get I was wondering how I could do it, so I changed the screen of rails g scaffold` to SPA.
You can imagine the basics of Hotwire by referring to the official video and Make real-time chat with Hotwire.
What was made https://github.com/blueplanet/hotwire-scaffold
--By displaying the input form directly in the index, I was able to make it a SPA
--~~ I wanted to install bootstrap and do the input form with modal, but I could get the HTML, but I couldn't do display modal after receiving it, so I gave up ~~
-turbo v7.0.0-beta.2 now draws the response even if the status code is abnormal, so use stimulus and turbo and close modal if it succeeds. In case of error, `was realized as it is
#When an error occurs in the controller`render :new`To`status: :unprocessable_entity`add to
def create
@post = Post.new(post_params)
respond_to do |format|
if @post.save
format.html { redirect_to @post, notice: 'Post was successfully created.' }
format.json { render :show, status: :created, location: @post }
else
format.html { render :new, status: :unprocessable_entity }
format.json { render json: @post.errors, status: :unprocessable_entity }
end
end
end
#turbo on form:submit-to the end event`modal#close`Link methods
<%= form_with(model: post, data: { controller: "modal", action: 'turbo:submit-end->modal#close' }) do |form| %>
#For modal close action`event.detail.formSubmission.result.success`You can judge the result with
close(event) {
if (event.detail.formSubmission.result.success) {
$('#post-modal').modal('hide')
}
}
--Points for SPA
--If you use turbo_frame_tag'post_form', you can do it almost without changing the existing view.
--By adding data: {turbo_frame:'post_form'} to link_to, the element with the same HTML id (post_form) as the above turbo_frame_tag will be replaced from the linked response.
- https://github.com/blueplanet/hotwire-scaffold/blob/master/app/views/posts/index.html.erb
-hotwire-rails does the main job just by setting the combination of turbo-rails and stimulus-rails. Is turbo-rails
--turbo is defined only for 5 types of movements append / prepend / replace / update / remove, and the other movements are like trying hard with stimulus.
--You can use the update process as a trigger to broadcast the process that updates the view, but if you need multiple processes, you still don't know how to limit the order of the processes.
--stimulus is not well understood yet
--By simply combining turbo_frame_tag anddata: {turbo_frame:'post_form'}, the view generated by the existing scaffold could be made into a SPA.
--By combining turbo_stream_from andbroadcast *, the result of the correction system could be reflected in real time.
--With webpacker, the submit button inside turbo_frame_tag is still disabled even though the Form submit response is 200.
--Therefore, the rails project was initialized with --skip-javascript.
――I couldn't find out, but it doesn't seem to be consistent with rails/ujs.
--Inconvenient because there is no webpacker, rails/ujs disappears, and form_with ... remote: true system cannot be used.
--Even without ujs, You can still use the data-confirm and data-disable-with. and Documented, but if you can, delete generated by scaffold link didn't work.
--If you use turbo, you don't have to write js. It feels like, but you need to get used to the turbo's way. --Since it cannot be used with ujs or webpacker`, it may be better to wait a little longer for introduction to existing projects.
-Make real-time chat with Hotwire
Recommended Posts