我尝试使用Hotwire将Rails 6.1支架制成SPA


简介

我认为能够反映我兄弟DHH发布的Hotwire和Websocket的实时更新会很方便，但是当我触摸了片刻后，我想知道get で画面遷移なしでHTMLを取得する時ってどうすればできるんだろう，所以rails g scaffold将屏幕更改为SPA。

您可以通过参考官方视频并与Hotwire建立实时聊天来想象Hotwire的基础知识。

结论

制成了什么
https://github.com/blueplanet/hotwire-scaffold

  • 我能够通过直接在索引中显示输入表单来制作SPA

    • 我想安装引导程序并使用模式来完成输入表单，但是我可以获取HTML，但是それを受けてから modal を表示する我做得不好，所以我放弃了

    • 在turbo v7.0.0-beta.2中，即使在状态代码异常的情况下也会做出响应，因此stimulus和turbo可以用于实现成功したら modal をクローズ；エラーの場合そのまま。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# controller にエラー時の `render :new` に `status: :unprocessable_entity` 追加
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

# form に turbo:submit-end イベントに `modal#close` メソッドを紐づく
<%= form_with(model: post, data: { controller: "modal", action: 'turbo:submit-end->modal#close' }) do |form| %>

# modal の close アクションに `event.detail.formSubmission.result.success` で結果を判定できる
close(event) {
  if (event.detail.formSubmission.result.success) {
    $('#post-modal').modal('hide')
  }
}

  • SPA兼容点

    • 使用turbo_frame_tag 'post_form'，您几乎可以在不更改现有视图的情况下进行操作

    • 通过将data: { turbo_frame: 'post_form' }添加到link_to，具有与上述turbo_frame_tag相同的HTML id(post_form)的元素将从链接的响应中替换。

    • https://github.com/blueplanet/hotwire-scaffold/blob/master/app/views/posts/index.html.erb

印象数

  • hotwire-rails只是设置了turbo-rails和stimulus-rails的组合，主要工作是turbo-rails。

  • turbo仅针对5种类型的运动append / prepend / replace / update / remove定义，其他运动是stimulus，感觉就像在努力。

  • 您可以通过使用更新过程作为触发器来广播该过程以更新视图，但是当需要多个过程时，如何限制过程的顺序尚不知道。

  • stimulus尚未被很好地理解

好地方

  • 通过简单地组合turbo_frame_tag和data: { turbo_frame: 'post_form' }，我能够将现有的脚手架生成的视图转换为SPA。

  • 通过组合turbo_stream_from和broadcast*，可以实时反映校正系统的结果。

您要改善的地方

  • 使用webpacker，即使"表单提交"响应为200，turbo_frame_tag中的"提交"按钮仍被禁用。

    • 因此，使用--skip-javascript初始化了rails项目。
    • 我找不到，但似乎与rails/ujs不一致。
  • 这很不方便，因为没有Webpacker，rails/ujs消失了，并且无法使用form_with ... remote: true系统。

  • 即使没有ujs，文档中也会显示You can still use the data-confirm and data-disable-with.，但是脚手架生成的删除链接无效。

摘要

  • 感觉像turbo を使えば、js を書かなくて済むよ，但是您需要习惯turbo ならでは方法。

  • 由于它不能与ujs或webpacker一起使用，因此最好稍等一会儿再介绍现有项目。

参考链接

  • 与Hotwire进行实时聊天
  • https://turbo.hotwire.dev/handbook/introduction