Blaze Layout Component

A simple Blaze Component for use with Flow Router's layout manager.

Adding this package to your Meteor application adds BlazeLayoutComponent class into the global scope. It also configures the root Blaze Component to serve as the root of the components' tree.

Client side only.

Installation

meteor add peerlibrary:blaze-layout-component

Usage

Define your layout component:

<template name="ColumnsLayoutComponent">
  {{> HeaderComponent}}
  <main>
    <div class="row">
      <div class="first col s4">
        {{> renderFirst}}
      </div>
      <div class="second col s4">
        {{> renderSecond}}
      </div>
      <div class="third col s4">
        {{> renderThird}}
      </div>
    </div>
  </main>
  {{> FooterComponent}}
</template>

1class ColumnsLayoutComponent extends BlazeLayoutComponent {
2  renderFirst(parentComponent) {
3    this._renderRegion('first', parentComponent);
4  }
5
6  renderSecond(parentComponent) {
7    this._renderRegion('second', parentComponent);
8  }
9
10  renderThird(parentComponent) {
11    this._renderRegion('third', parentComponent);
12  }
13}
14
15ColumnsLayoutComponent.register('ColumnsLayoutComponent');

Then you can define a route using this layout:

1FlowRouter.route('/post/:_id', {
2  name: 'Post.display'
3  action: function (params, queryParams) {
4    BlazeLayout.render('ColumnsLayoutComponent', {
5      first: 'FirstComponent',
6      second: 'SecondComponent',
7      third: 'ThirdComponent'
8    });
9  }
10});

Alternatively, you can restrict regions' names to catch possible errors:

1class ColumnsLayoutComponent extends BlazeLayoutComponent {
2  renderFirst(parentComponent) {
3    this._renderRegion(this.constructor.REGIONS.FIRST, parentComponent);
4  }
5
6  renderSecond(parentComponent) {
7    this._renderRegion(this.constructor.REGIONS.SECOND, parentComponent);
8  }
9
10  renderThird(parentComponent) {
11    this._renderRegion(this.constructor.REGIONS.THIRD, parentComponent);
12  }
13}
14
15ColumnsLayoutComponent.REGIONS = {
16  FIRST: 'first',
17  SECOND: 'second',
18  THIRD: 'third'
19};
20
21ColumnsLayoutComponent.register('ColumnsLayoutComponent');

A good pattern to access the _id parameter from the URL is something like:

1class FirstComponent extends BlazeComponent {
2  onCreated() {
3    super.onCreated();
4
5    this.currentPostId = new ComputedField(() => {
6      return FlowRouter.getParam('_id');
7    });
8
9    this.autorun((computation) => {
10      postId = this.currentPostId();
11      if (postId) this.subscribe('Comments', postId);
12    });
13  }
14
15  comments() {
16    return Comments.find({
17      'post._id': this.currentPostId()
18    });
19  }
20}
21
22FirstComponent.register('FirstComponent');