TurbolinksからTurboへの移行

適切なNodeパッケージのインストールから始めましょう。 turbolinksはもう必要ないので 、以下の2つのコマンドに示すように、ノードリストからそれを消去して、ターボレールの依存関係を追加するだけです。

yarn remove turbolinks
yarn add @hotwired/turbo-rails

Railsを使用している場合、すべてが正しくインストールされていることを確認するもう1つの優れた方法は、次のコマンドを実行することです。

rails turbo:install

これにより、Webpackerがアプリケーションにインストールされている場合、npmを介してTurboがインストールされます。このコマンドは、何かを見逃した場合に備えて、プロジェクトからすべてのTurbolinksの古い依存関係を削除しようとします。

次に、 app / javascript / packs / application.jsを開きます ファイルを作成し、次のコード行を見つけます。

import Turbolinks from "turbolinks";

Turbolinks.start();

Railsアプリのバージョンによってインポートが若干変わる場合があることに注意してください（古いバージョンではrequireを使用していました） importの代わりに ）。それでも、プロセスはどちらも同じです。

次に、それらを次のそれぞれに置き換えます。

import "@hotwired/turbo-rails";

はい、インポートは1つだけです。手動で何かを開始する必要はありません。 Turbo インスタンスは自動的にwindow.Turboに割り当てられます インポート時にオブジェクト。管理が簡単です。

テストして、Turboだけを探していて、Turbolinksを探していないかどうかを確認するには、ファイルの最後に次のコードスニペットを追加しましょう。

$(document).on("turbolinks:load", () => {
  console.log("turbolinks!");
});
$(document).on("turbo:load", () => {
  console.log("turbo!");
});

ブラウザでページがリロードされたら、コンソールログをチェックして、何が印刷されるかを確認します。

ターボロードイベントログの確認

app / views / layouts / application.html.erbに加える必要のあるもう1つの変更があります ファイル。基本的に、古いTurbolinksデータ属性をTurboの同等のものに変更します。 data-turbolinks-*を使用して2つのタグを見つけます 属性を次のように置き換えます：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>

これは、Turboがheadにインポートされたすべてのアセットを自動的に追跡できるようにするために重要になります。 タグを付けて、変更された場合に備えて必ずリロードしてください。これは、そこに追加したすべてのスクリプトとスタイルを含む、すべてのファイルに適用されます。

<%= link_to 'New Post', new_post_path, :class => "btn btn-primary btn-sm", "data-turbo" => "false" %>

<div class="actions">
    <%= form.submit class: "btn btn-primary btn-sm", "data-turbo" => false %>
</div>

class Post < ApplicationRecord
    validates :name, presence: true
    validates :title, presence: true
end

# def create
format.html { render :new, status: :unprocessable_entity }

# def update
format.html { render :edit, status: :unprocessable_entity }

<%= turbo_frame_tag post do %>
    ...
<% end %>

<turbo-frame id="new_post">
  <form action="/posts" accept-charset="UTF-8" method="post">
    ...
  </form>
</turbo-frame>

.turbo-progress-bar {
  height: 15px;
  background-color: gold;
}

window.Turbo.setProgressBarDelay(1);