Flow-layout - exactly what gets rendered when?

help
1

I have been playing with flow architecture using flow-router and flow-layout. I have two routes (’/’ and ‘/blog’) defined like this:

  FlowRouter.route("/", {
        	action : function () {
        		FlowLayout.render("layout1", { top : "header", main : "home" });
        		console.log("this is home route.");
        	}
        });
    
    FlowRouter.route("/blog", {
    	action : function  () {
    		FlowLayout.render("layout1", { top : "header", main : "blog" });
    		console.log("this is blog route ");
    	}
    });
    
    
    FlowRouter.notFound = {
    	action : function (argument) {
    		FlowLayout.render("layout1", { top: "header", main : "notFound" });
    		console.log("route not found");
    	}
    };

My very simple templates look like this:

<template name="layout1">
	{{> Template.dynamic template=top }}
	{{> Template.dynamic template=main }}
</template>

<template name="header">
	<h1>should stay the same.</h1>
</template>

<template name="home">
	<h1>this is home</h1>
</template>

<template name="blog">
	<h1>this is blog</h1>
</template>

<template name="notFound">
	<h2>no such page</h2>
</template>

The thing I noticed is that when I go between these two routes (back and forth) then the whole page gets re-rendered. Not only re-rendered but all scripts were loaded too! When I view the elements (Chrome Debugger) I can see that the whole DOM gets refreshed. Is this normal behavior? This behaves more like a classic, server rendered HTML page rather than Meteor app. Check out these two screen captures. One is on home page (meteor just started, and all scripts were loaded) and the other one is on ‘/blog’ when all the scripts were loaded into the page again.

2

I can understand what’s happening.
If you change the URL directly, back button reload the page.

In order to have this, you need to implement links on the HTML pages. (For an example, create two links for blog and home)

Or else you can use FlowRouter.go("/blog") to change the route.

Then the back button works as you expected.

2 Likes
3

Yeah to demonstrate what you want to see just update this:

to this:

<template name="header">
<h1>should stay the same.</h1>
<a href="/">home</a> | <a href="/blog">blog</a>
</template>
4

That’s exactly what I was doing (using back/forth buttons and typing URLs in the address window). Thanks for your help Arunoda!

5

This works like a charm. Thanks!