peerlibrary / blaze-layout-component

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

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.

Alternatively, you can also use our fork of Flow Router, which adds ignoring links feature to it.

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>

class ColumnsLayoutComponent extends BlazeLayoutComponent {
  renderFirst(parentComponent) {
    return this._renderRegion('first', parentComponent);
  }

  renderSecond(parentComponent) {
    return this._renderRegion('second', parentComponent);
  }

  renderThird(parentComponent) {
    return this._renderRegion('third', parentComponent);
  }
}

ColumnsLayoutComponent.register('ColumnsLayoutComponent');

Then you can define a route using this layout:

FlowRouter.route('/post/:_id', {
  name: 'Post.display'
  action: function (params, queryParams) {
    BlazeLayout.render('ColumnsLayoutComponent', {
      first: 'FirstComponent',
      second: 'SecondComponent',
      third: 'ThirdComponent'
    });
  }
});

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

class ColumnsLayoutComponent extends BlazeLayoutComponent {
  renderFirst(parentComponent) {
    return this._renderRegion(this.constructor.REGIONS.FIRST, parentComponent);
  }

  renderSecond(parentComponent) {
    return this._renderRegion(this.constructor.REGIONS.SECOND, parentComponent);
  }

  renderThird(parentComponent) {
    return this._renderRegion(this.constructor.REGIONS.THIRD, parentComponent);
  }
}

ColumnsLayoutComponent.REGIONS = {
  FIRST: 'first',
  SECOND: 'second',
  THIRD: 'third'
};

ColumnsLayoutComponent.register('ColumnsLayoutComponent');

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

class FirstComponent extends BlazeComponent {
  onCreated() {
    super.onCreated();

    this.currentPostId = new ComputedField(() => {
      return FlowRouter.getParam('_id');
    });

    this.autorun((computation) => {
      postId = this.currentPostId();
      if (postId) this.subscribe('Comments', postId);
    });
  }

  comments() {
    return Comments.find({
      'post._id': this.currentPostId()
    });
  }
}

FirstComponent.register('FirstComponent');