Hotwire: HTMLだけのTurbo Frames

usutani

下記の投稿に触発されてサンプルコードを書いてみました。
ありがとうございます。

変更点：turbo-frameを追加して、入れ子にしました。

index.html
fooの中にbarを配置する。
同じページを取得するが、呼び元 turbo-frame のidが異なる。

最初のページ

以下、turbo-frameの枠線を追加した図。

foo：赤枠、bar：青枠

fooをクリックした場合は、fooとfoo配下のbarも置き換わる。

fooクリック後

送信ボタンをクリックすると、fooが最初のページに置き換わる。

barをクリックした場合は、barだけが置き換わる。

barクリック後

送信ボタンをクリックすると、barが最初のページに置き換わる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script type="module">
      import hotwiredTurbo from "https://cdn.skypack.dev/@hotwired/turbo";
    </script>
  </head>
  <body>
    <main class="container">
      <h2>Turbo Frames</h2>
      <turbo-frame id="foo">
        <a href="foo.html">foo.html, id="foo"</a>
        <br>
        <turbo-frame id="bar">
          <a href="foo.html">foo.html, id="bar"</a>
        </turbo-frame>
      </turbo-frame>
      <h2>Turbo Frames</h2>
    </main>
  </body>
</html>

foo.html
idがfooとbarで違うだけです。

<turbo-frame id="foo">
  <form action="./index.html">
    <input placeholder="index.html, id=foo" />
    <input type="submit" />
  </form>
</turbo-frame>
<turbo-frame id="bar">
  <form action="./index.html">
    <input placeholder="index.html, id=bar" />
    <input type="submit" />
  </form>
</turbo-frame>

サーバーを動かす。
ruby -run -e httpd . -p 3000

以上です。

この記事が気に入ったらサポートをしてみませんか？