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.