Skip to content

Latest commit

 

History

History
97 lines (85 loc) · 2.28 KB

templating-with-regions.md

File metadata and controls

97 lines (85 loc) · 2.28 KB
Raw

Templating with "Regions"

  • Note: Blaze templating is available only if application has templating and blaze, or blaze-html-templates packages installed.

Create layout

<!-- /imports/client/layout/layout.html -->
<template name="layout">
  <aside>
    <nav>
      {{> Template.dynamic template=sidebar }}
    </nav>
  </aside>

  <main>
    {{> yield}}
  </main>

  <footer>
    {{> Template.dynamic template=footer }}
  </footer>
</template>
// /imports/client/layout/layout.js
import { Template } from 'meteor/templating';
import './layout.html';
/* ... */

Create index template

<!-- /imports/client/index/index.html -->
<template name="index">
  <h1>Hello World!</h1>
  <p>This is index template.</p>
</template>
// /imports/client/index/index.js
import { Template } from 'meteor/templating';
import './index.html';
/* ... */

Create sidebar template

<!-- /imports/client/sidebar/sidebar.html -->
<template name="sidebar">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</template>

Create footer template

<!-- /imports/client/footer/footer.html -->
<template name="footer">
  Copyright Awesome Inc. © 2017
</template>

Create index route

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
// Import layout template statically as it will be used a lot
import '/imports/client/layout/layout.js';

// Create index route
FlowRouter.route('/', {
  name: 'index',
  waitOn() {
    return [
      import('/imports/client/index/index.js'),
      import('/imports/client/sidebar/sidebar.html'),
      import('/imports/client/footer/footer.html')
    ];
  },
  action() {
    this.render('layout', 'index', {
      sidebar: 'sidebar',
      footer: 'footer'
    });
  }
});

Further Reading