All geek questions in one place

Prevent Meteor / Iron Router reboot when changing routes

I notice that every time the Meteor / Iron Router changes routes, the whole page is updated.

Why is this happening and how can I prevent it?

The way to set up routes is something like this for every new route ...

Router.route('/route/:_some_param', { name: 'something', onBeforeAction: function(){ // Something }, waitOn: function(){ // Some subscription }, action: function(){ // Something }, })

I have several routes configured this way. Whenever I go from page to page, Meteor reloads the entire page. However, when I stop on one route and just change the parameters, Meteor only reloads what is needed, and this is what I want all the time.

+6
source share
4 answers

I believe that what you are observing is the basis for the operation of the Iron Router. You create a master template with the {{> yield }} template placeholder, and the Iron Router swaps it for the template specified by this route. If you choose a different route, {{> yield }} will now point to a new template and, thus, part of the page will be redrawn. You can minimize the number of paged pages by minimizing the amount of your {{> yeild }} in the wizard template.

For example, in my template, I have a header and footer:

 <html> {{> header }} {{> yield }} {{> footer }} </html>

When I move along the routes, the header and footer are not updated at all, just the “guts” between them.

+1
source

How exactly do you change pages? Meteor will reload the entire page if you use traditional anchor tags as an anchor tool.

For example, if you move between templates and use this structure:

 <a href="/pathToTemplate">Let go to the new template!</a>

Meteor will reload the entire page because you are actually using the anchor tag to inform the browser about changing routes. However, if you use this structure:

 <a href="{{pathFor 'yourTemplateName'}}">To the new template ahoy!</a>

The link will tell Iron Router that your template has changed for you and will only update the code that you have in the {{> yield}} area. In order to direct links to the necessary pages, make sure that you have placed everything indicated in the name:... field in your router in the 'yourTemplateName' section of the 'yourTemplateName' helper.

In short, the reason you get a full-blown browser update is most likely due to the fact that you are using a browser to jump between links instead of using the built-in Meteor and Iron Router helpers to calculate the logic for the transition. You can do a lot with this helper, and if you need more information, I would recommend checking out the Path and Link template helper section on the Iron Router Git page .

If you need only a certain part of the page to refresh, and the rest remains the same, I will refer to the answer of CodeChimp, as it is sound. If you need different layout templates for different things, the Layouts section should help you get a nice and dandy with your code, and maybe even make you crack a smirk as soon as the fighters steadily move away from the exploding building.

Another situation you may find is to use a link to perform an action, but you do not want the browser to capture the event and re-display the page. In this case, you would set up your HTML code as usual, and then target this element by receiving a click event, either by its name, class or tag, and using the following code structure in the javascript file that matches your template. This is useful for submitting forms that run the Meteor method, which does something on the server, and then returns the necessary data (usually to the redirect function), etc. Etc.

So, if you are on a crazyStuffIsAboutToHappen template and you want to call the Meteor method called doCrazyStuff when you click on the link with the identifier #triggerCrazyStuff and then Meteor redirects the user to theHouseThatCrazyStuffBuilt template, you should use the following structure.

 Template.crazyStuffIsAboutToHappen.events( 'click #triggerCrazyStuff': (e) -> e.preventDefault() # to stop the browser from hijacking the event # -- error handling and pre-submit validation and yadda yadda -- Meteor.call('doCrazyStuff', --arguments--, (error, result) -> if error # handle the error + short-circuit the function. return throwError(error.reason) Router.go('theHouseThatCrazyBuilt, {--args--}) )

And yes, the Template.TEMPLATE_NAME.events scope is also very handy for all other JS events like MouseEnter etc. etc.

Happy coding!

+1
source

If you have a route that:

Has its own path with /

Has a subscription function that returns []

This may cause an unwanted reboot.

Add a dummy subscription to fix it.

See: https://github.com/iron-meteor/iron-router/issues/1149#issuecomment-72520329

0
source

Not sure if this will help other people, but I searched and looked for the answer to this question and finally figured it out - basically, every time I clicked on a specific link, the Iron Router was a hard refresh (hard reset, round shutdown until server) the entire page.

It turns out I had a full finger on href, and it was a round trip to the server to search for the route there (I suppose that's how the Iron Router handles routes on the server side).

Basically, I had such routes as:

 /item /items/:id

and I had a link pointing to

 /item/1234

When I fixed it,

 /items/1234

Everything worked as expected.

0
source

Source: https://habr.com/ru/post/980256/

More articles:


All Articles