Why turbo-frame need other turbo-frame to replace it?

1

Here a djangodev!

I had tested turbo, It looks simple and promise but I had some doubts:

on the frontend I put:

<!-- index.html -->
<turbo-frame target="_top" id="messages" src="/message">
        <div>
       custom messages will replace with /message
    </div>
</turbo-frame>

On my backend, I had a setup a new view and URL: /message

<!-- message.html -->

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
message end

When I try. I see turbo fetch the /message on the network tab of chrome. But the content not replaced when I see the intro video again. I realize I need to use:

<!-- message.html -->
<turbo-frame id="messages">
{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
message end
</turbo-frame>

Then all turbo-frame tag will replace with other turbo-frame what comes on the responseā€¦

Why is designed that form? Not will be easier only to put the response.

2 Likes
2

Hey. from my understanding the reasoning is that you can have a ā€œcompleteā€ page e.g. with Navigation and everything. But when you want to fetch its ā€œcontentā€ part via turbo-frame it works automagically. So if you have two complete pages with nav and everything but both their content is inside tags, then they can easily reference themselves out of the box and only the content will be replaced.

1 Like
3

That seems to be the standard turbo way, if Iā€™m not mistaken this is what dhh call ā€˜contextsā€™, you need to specify the context at the initial view as well as the final view, you can notice that the same html.erb file could serve many different contexts. Iā€™m still getting used to this ā€˜approachā€™ as wellā€¦ I have so many questions, but Iā€™m super excited.

1 Like
4

So you mean i can serve the same page on the data-frame src and only will replace the part of what reference ?

5

The only benefits I can think of are:

  • you can build a site that works both for someone with javascript enabled and someone that does not, and
  • it might simplify the build and test process, and the strongest reason:
  • if you already have a large site you can start embedding forms without breaking the old code.

For example, you can write a full edit form with headers, navbar, footer, etc. Make this work with the ā€œold-fashionedā€ way. Then markup the part of this form that you want to embed, by wrapping it in a turbo frame. (For a lazy-loaded frame the idea is similar, but I think you need a noscript tag to render the old-fashioned links.)

2 Likes
6

Yes, you can have many turbo-frame in the same html.erb. I canā€™t claim you should, but I think itā€™s been built to allow this kinda of thing.
Iā€™m kinda newbie in terms of hotwire ( everyone seems to be ), but I couldnā€™t update many turbo-frames at once, It seems that every action ( button, link ) is tied to one turbo-frame, thus updates only one turbo-frame

7

I think there is a variety of benefits, as dhh explains, but we are also going back to the SSR and re-learning how to build things again. Not sure your answer was about the turbo-frame , mine was a generic one though.

8

@dhh answer my question on the podcast of adam:

from minute 64.

@JulianFeinauer is right!

tldr: When you had a large project with 3000 part views for a page you can replace the 3K views with only 5 views. Thatā€™s the reason for use a turbo-frame replace with other turbo-frame.

2 Likes
9

Iā€™m listening to the this episode right now :grin::grin::grin:

1 Like