Thread by @zhephyn

Your first Hotwire application, a blog series. Part 2
This part of the series will serve as a gentle introduction to what Turbo frames are used for and how to integrate them into the blog application we built in the first part of the series. x.com/zhephyn/status… x.com/zhephyn/status…

We use Turbo frames to "slice" a web page into independent sections, and have updates applied to these individual sections instead of the entire page.
Enclosing a section of a page in a turbo frame tag like below, turns that section into a Turbo frame.

In the above code, we wrapped the statement in the p tag in a turbo frame do-end block thus turning it into a turbo frame. The phrase "paragraph turbo frame" is the id of the newly created turbo frame and is important for identification purposes.

For this application, we'll use Turbo frames to restrict most CRUD actions to happen on the index page. We'll use frames to render the form to create a new post on the index page, apply inline editing as well as for displaying longer versions of posts. We'll proceed to do these.

1. Rendering a "create post" form on the index page.
With a combination of the turbo frame tag and the dom_id helper, we'll be able to generate "id's" for the Turbo frames crucial for this implementation. Since this is a model-backed resource, typing out string id's for the...

various turbo frames, like in the example code above wouldn't be viable.
- Create an empty turbo frame on the index page like below:

- Wrap the code associated with displaying the "create post" form in a turbo frame do-end block with an id similar to that of the empty turbo frame on the index page.

- Edit the "New Post" button on the index page by adding a data-turbo-frame attribute to it. With this change, clicking this button will trigger the "swapping" mechanism by which Turbo frames operate namely, the empty turbo frame on the index page will be "replaced" by the....

turbo frame enclosing the "create post" form. To achieve this, we'll pass in an id for to the data-turbo-frame attribute, similar to that of the 2 associated Turbo frames like below;

On trying it out in the browser, displaying the form on the index page as well as creation of the new post works as expected. However, we get a content missing error and the newly crated post isn't added seamlessly to the index page. We'll solve this in a few.

2. Inline Editing for posts
- Wrap the edit form in a Turbo frame tag