Name: blaze-layout
Owner: PeerLibrary
Description: Layout Manager for Blaze (works well with Meteor FlowRouter)
Created: 2015-10-17 03:20:45.0
Updated: 2015-10-17 03:20:46.0
Pushed: 2015-10-18 02:18:10.0
Size: 123
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This project is earlier known as meteorhacks:flow-layout. This is an exact copy of FlowLayout but in a different name.
This is a layout manager designed for Blaze. This is built to use with FlowRouter but, this can be used without FlowRouter too. This is a very simple layout manager. It will does following:
First install BlazeLayout with:
or add kadira:blaze-layout
Then create following few templates
plate name="layout1">
> Template.dynamic template=top}}
> Template.dynamic template=main}}
mplate>
plate name="header">
1>This is the header</h1>
mplate>
plate name="postList">
2>This is the postList area.</h2>
mplate>
plate name="singlePost">
2>This is the singlePost area.</h2>
mplate>
Now you can render the layout with:
eLayout.render('layout1', { top: "header", main: "postList" });
Then you will get output like below:
1>This is the header</h1>
2>This is the postList area.</h2>
Sometimes later, you can render the layout again:
eLayout.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>This is the header</h1>
2>This is the singlePost area.</h2>
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.
By default, BlazeLayout render layouts into a DOM element with the id __blaze-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:
eLayout.setRoot('body');
You can set any CSS selector or any jQuery object as the root.