meteorhacks:flow-layout

Layout Manager for Meteor

This is a layout manager designed for flow architecture. But, this can be used without other layers of flow. This is a very simple layout manager. It will does following:

• Allow you to render a layout template to the UI
• Allow you to pass data to the layout
• Only re-render when necessary parts of the layout
• Can be used with multiple layouts

Usage

First install flow-layout with:

meteor add meteorhacks:flow-layout

Then create following few templates

1<template name="layout1">
2  {{> Template.dynamic template=top}}
3  {{> Template.dynamic template=main}}
4</template>
5
6<template name="header">
7  <h1>This is the header</h1>
8</template>
9
10<template name="postList">
11  <h2>This is the postList area.</h2>
12</template>
13
14<template name="singlePost">
15  <h2>This is the singlePost area.</h2>
16</template>

Now you can render the layout with:

1FlowLayout.render('layout1', { top: "header", main: "postList" });

Then you will get output like below:

1  <h1>This is the header</h1>
2  <h2>This is the postList area.</h2>

Sometimes later, you can render the layout again:

1FlowLayout.render('layout1', { top: "header", main: "singlePost" });

Since only the main is changed, top section won't get re-rendered. Here's the HTML you'll get:

1  <h1>This is the header</h1>
2  <h2>This is the singlePost area.</h2>

Rendering Multiple Templates

Likewise you can create multiple templates and switch between each other. But when you are changing the layout, whole UI will get re-rendered again.

So, it's a good idea to use a few layouts if possible.

Set Different Root Node

By default, Flow Layout render layouts into a DOM element with the id __flow-root. Sometimes, you may need to change it or just render layouts into the body. If so, here's how to do it.

Add following code inside on the top of one of your client side JS file:

1FlowLayout.setRoot('body');

You can set any CSS selector or any jQuery object as the root.