pwix:blaze-layout

Preliminary notes

This package is a fork from kadira:blaze-layout v 2.3.0:

• because I use it and like it (that's fine ;))
• unfortunately, it seems no more maintained
• and the #83 issue prevented me to be able to upgrade my Meteor environments
• so one fix later this package is born.

This project was earlier known as meteorhacks:flow-layout. This was an exact copy of FlowLayout but with a different name.

What is it ?

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:

• 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.

Installation

This Meteor package is installable with the usual command:

    meteor add pwix:blaze-layout

Usage

First install BlazeLayout.

Then create following few templates, Say, for example:

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:

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

1    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:

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 as few layouts as possible.

Set 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:

1    BlazeLayout.setRoot('body');

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

Provides

BlazeLayout

The exported BlazeLayout global object provides following items:

Functions

BlazeLayout.render( layout, region )

Render the layout template, dynamically updating regions sub-templates.

BlazeLayout.reset()

Reset (and remove) the Blaze previously rendered layout.

BlazeLayout.setRoot( root )

Set a new root node, default being #__blaze-root.

Configuration

None at the moment.

NPM peer dependencies

None at the moment.

Translations

None at the moment.

Cookies and comparable technologies

None at the moment.

Issues & help

In case of support or error, please report your issue request to our Issues tracker.

Original documentation

The documentation was originally from kadira. See also the Github original repository.

It has been since rewritten for completion and homogenization.

---

P. Wieser

• Last updated on 2024, Jun. 13th