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.