Meteor Blaze Layout

meteor

https://github.com/kadirahq/blaze-layout - done reading

What is the purpose of the kadira:blaze-layout package?

It is a layout manager, responsible for rendering templates.

What are the steps that we have to do in order to use Blaze Layout?

  1. Install the kadira:blaze-layout package
  2. Create the main layout template
  3. Create child templates
  4. Pass the name of the child template to the render method inside the route

How can we use BlazeLayout?

meteor add kadira:blaze-layout

// Create the main layout template:
<template name="mainLayout">
  {{> Template.dynamic template=top}}
  {{> Template.dynamic template=main}}
</template>

// Create the child templates:
<template name="header">
  <h1>This is the header</h1>
</template>

<template name="postList">
  <h2>This is the postList area.</h2>
</template>

<template name="singlePost">
  <h2>This is the singlePost area.</h2>
</template>

// Render the layout inside the route:
BlazeLayout.render('mainLayout', { top: "header", main: "postList" });

We've defined the main layout:

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

and we specified the layout and templates when we invoke the render function in the action part of our route:

BlazeLayout.render('mainLayout', { top: "header", main: "postList" });

The initial output:

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

But later on, we can re-render the layout with a different template:

BlazeLayout.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:

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

What is a layout?

A layout is a common view for the app, which usually contains a header, footer and some dynamic content:

<template name="mainLayout">
  <header><h1>Kadira Blog</h1></header>
  <main>
    {{>Template.dynamic template=content}}
  </main>
  <footer>We love Meteor</footer>
</template>

In the above layout, we can render any template into the main area. The content variable carries the name of the template we are rendering with Template.dynamic. We pass it via BlazeLayout.render().

Can we have multiple layout?

Yes. But when you are changing the layout, whole UI will get re-rendered again.

How can we set a different root node?

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:

BlazeLayout.setRoot('body');

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

Do we need to pass data to BlazeLayout?

No. We should not pass collection data into BlazeLayout. If we are not using route parameters inside the layout, we should not even pass route params via BlazeLayout. You can pass anything to BlazeLayout, but you should not pass data into templates like this:

<main>
  {{>Template.dynamic template=content data=params}}
</main>

FlowRouter.route('/:postId', {
  action: function(params) {
    BlazeLayout.render("mainLayout", {
      content: "blogPost",
      params: params
    });
  }
});

If you do this, there's a possibility that there will be unnecessary template re-renders and there are better ways of addressing this. We are going to discuss these in the section: "Accessing the URL State".

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License