Currently creating a portfolio In that, I implemented a calendar function using JavaScript,
** When transitioning from link_to to the calendar page, There was a problem that JavaScript was not applied unless it was reloaded once **, so
I am writing this article with the intention of clarifying the cause of this area and keeping a record. Please note that this article is by a beginner in programming.
All in all, ** Turbolinks **. Because of this guy, the JS I wrote hard is not displayed at the transition destination.
Thinking this way, it seems like a hateful guy, When I researched various things, it seems that he is actually a good guy.
It's a good guy, but sometimes with extra help, It seems that we inadvertently hide our important and important JS.
Turbolinks, maybe you can't hate it. That made me want to know more (forcibly).
That's why I'll take a closer look.
Turbolinks is a library that automatically Ajax page transitions in response to link clicks.
① Click the a tag to get the transition destination page with Ajax
(2) If the CSS or JS required by the acquired page is the same as that of the current page, replace only the title and body (only a part of the screen).
That is the main mechanism of Turbolinks.
The biggest advantage of introducing Turbolinks is that it ** speeds up the screen display **.
Normally, clicking a link will take you to the specified page, so it will take that much time, but if you have Turbolinks installed, ** the page will not be transitioned and Ajax will part of the screen Since it is a mechanism to update only **, as a result, it does not take time to load and the page display speeds up.
From the point of view of the site, I want to eliminate the waiting time as much as possible. Turbolinks feels like a savior that improves UX.
What a good guy: laughing: The fact that it was introduced from the beginning is because it is convenient and usable as it is.
That said, no matter how good a guy is, it can be annoying at times and in some cases.
The disadvantage of introducing Turbolinks is that it may interfere with the proper display of JS and CSS **.
In terms of benefits, I explained that Turbolinks only updates part of the screen, It can be said that this mechanism causes the problem that JavaScript does not reflect well. In the above, I mentioned that if you use Turbolinks, ** page transition will not be performed and only a part of the screen will be updated by Ajax **.
** Since the page transition of the browser is not performed, the JavaScript event does not fire **, and as a result, the JavaScript does not reflect well.
This is the rumored Turbolinks extra section. I see.
Introducing Turbolinks, disabling it where necessary, I want to reflect the behavior of JavaScript somehow.
Apparently there are two solutions for those people.
Make JS work properly by adding the event turbolinks: load dedicated to Turbolinks to the JS file.
test.js
document.addEventListner('turbolinks:load', function() {
console.log('Loaded');
});
By adding data: {"turbolinks" => false} to the a tag (link_to)
JS works normally by disabling Turbolinks and making it jump to the transition destination.
test.html.slim
=link_to "test", tests_path, data: {"turbolinks" => false}
I happened to look into Turbolinks when I created my portfolio. The more I looked up, the deeper I felt. This time, I'll keep the basics, but if I have another chance, I'd like to investigate.
If you find any mistakes or omissions in the content of this article, we would appreciate it if you could let us know.
Reference: Rails Guide Turbolinks Operating Principle [Ruby on Rails Quick Learning Guide p.340-p.344](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD % BF% E3% 81% 88% E3% 82% 8B-Ruby-Rails-5% E9% 80% 9F% E7% BF% 92% E5% AE% 9F% E8% B7% B5% E3% 82% AC % E3% 82% A4% E3% 83% 89-% E5% A4% A7% E5% A0% B4% E5% AF% A7% E5% AD% 90 / dp / 4839962227 / ref = sr_1_1? __mk_ja_JP =% E3 % 82% AB% E3% 82% BF% E3% 82% AB% E3% 83% 8A & crid = 2RTWZ5N8BXF8J & dchild = 1 & keywords = rails +% E5% AE% 9F% E8% B7% B5% E3% 82% AC% E3% 82 % A4% E3% 83% 89 & qid = 1600782175 & sprefix = rails +% E5% AE% 9F% E8% B7% B5% 2Caps% 2C249 & sr = 8-1)
Recommended Posts