peerlibrary/blaze-layout-component

Name: blaze-layout-component

Owner: PeerLibrary

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

Created: 2015-12-06 09:41:17.0

Updated: 2017-02-23 17:54:21.0

Pushed: 2017-02-06 06:51:55.0

Homepage: https://atmospherejs.com/peerlibrary/blaze-layout-component

Size: 8

Language: CoffeeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

or add peerlibrary:blaze-layout-component

Usage

Define your layout component:

plate name="ColumnsLayoutComponent">
> HeaderComponent}}
ain>
<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}}
mplate>

avascript
s ColumnsLayoutComponent extends BlazeLayoutComponent {
nderFirst(parentComponent) {
return this._renderRegion('first', parentComponent);


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


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



mnsLayoutComponent.register('ColumnsLayoutComponent');

Then you can define a route using this layout:

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

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

s ColumnsLayoutComponent extends BlazeLayoutComponent {
nderFirst(parentComponent) {
return this._renderRegion(this.constructor.REGIONS.FIRST, parentComponent);


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


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



mnsLayoutComponent.REGIONS = {
RST: 'first',
COND: 'second',
IRD: 'third'


mnsLayoutComponent.register('ColumnsLayoutComponent');

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

s FirstComponent extends BlazeComponent {
Created() {
super.onCreated();

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

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


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



tComponent.register('FirstComponent');