Working the hotrails.dev tutorial - Chapter 4 Turbo Frames

As noted in part 1 of this blog series, I am working thru the HotRails.dev tutorial and building a set of personal notes.

Note: Don’t read this; this is my learning notes. Go read HotRails.dev which is an ASTONISHINGLY GOOD, FANTASTIC, WONDERFUL tutorial. Seriously. Go there NOW and stop reading this.

Notes on Chapter 3 – Turbo Frames

Turbo Frames are independent pieces of a web page that can be appended, prepended, replaced, or removed without a complete page refresh and WITHOUT writing a single line of JavaScript!

The rules for Turbo Frames. THESE RULES APPLY TO BOTH LINKS AND FORMS!!!

• Rule 1: When clicking on a link within a Turbo Frame, Turbo expects a frame of the same id on the target page. It will then replace the Frame’s content on the source page with the Frame’s content on the target page. When clicking on a link within a Turbo Frame, if there is a frame with the same id on the target page, Turbo will replace the content of the Turbo Frame of the source page with the content of the Turbo Frame of the target page.
• Rule 2: When clicking on a link within a Turbo Frame, if there is no Turbo Frame with the same id on the target page, the frame disappears, and the error Response has no matching element is logged in the console.
• Rules 3: A link can target another frame than the one it is directly nested in thanks to the data-turbo-frame data attribute.

When using the “_top” keyword, the URL of the page changes to the URL of the target page, which is another difference from when using a regular Turbo Frame.