https://github.com/peerlibrary/blaze-layout-component
A simple Blaze Component for use with Flow Router's layout manager
https://github.com/peerlibrary/blaze-layout-component
blaze meteor meteor-package
Last synced: about 2 months ago
JSON representation
A simple Blaze Component for use with Flow Router's layout manager
- Host: GitHub
- URL: https://github.com/peerlibrary/blaze-layout-component
- Owner: peerlibrary
- License: bsd-3-clause
- Created: 2015-12-06T09:41:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-09-23T06:00:21.000Z (almost 6 years ago)
- Last Synced: 2025-04-19T12:42:23.450Z (2 months ago)
- Topics: blaze, meteor, meteor-package
- Language: CoffeeScript
- Homepage: https://atmospherejs.com/peerlibrary/blaze-layout-component
- Size: 8.79 KB
- Stars: 11
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Blaze Layout Component
======================
A simple [Blaze Component](https://github.com/peerlibrary/meteor-blaze-components) for use with
[Flow Router](https://github.com/kadirahq/flow-router)'s [layout manager](https://github.com/kadirahq/blaze-layout).
Adding this package to your [Meteor](http://www.meteor.com/) 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](https://github.com/peerlibrary/flow-router), which
adds [ignoring links](https://github.com/peerlibrary/flow-router#ignoring-links) feature to it.
Client side only.
Installation
------------
```
meteor add peerlibrary:blaze-layout-component
```
Usage
-----
Define your layout component:
```handlebars
{{> HeaderComponent}}
{{> renderFirst}}
{{> renderSecond}}
{{> renderThird}}
{{> FooterComponent}}
```
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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');
```