Skip to content

Latest commit

 

History

History
105 lines (92 loc) · 2.92 KB

templating-with-data.md

File metadata and controls

105 lines (92 loc) · 2.92 KB

Templating with Data

  • 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>
      <!-- sidebar -->
    </nav>
  </aside>

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

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

Create notFound (404) template

<!-- /imports/client/notFound/notFound.html -->
<template name="notFound">
  <h1>404</h1>
  <p>No such page.</p>
</template>

Create article template

<!-- /imports/client/article/article.html -->
<template name="article">
  <h1>{{article.title}}</h1>
  <p>{{article.headline}}</p>

  {{{article.text}}}
</template>

Create loading template

<!-- /imports/client/loading/loading.html -->
<template name="loading">
  Loading...
</template>

Create article route

  1. Create article route
  2. Using waitOn hook wait for template and subscription to be ready
  3. Using action hook to render article template into layout
  4. Using data hook fetch data from Collection
  5. If article doesn't exists (bad _id is provided) - render 404 template using onNoData hook
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
// Import layout, loading and notFound templates statically as it will be used a lot
import '/imports/client/layout/layout.js';
import '/imports/client/loading/loading.html';
import '/imports/client/notFound/notFound.html';

// Create article route
FlowRouter.route('/article/:_id', {
  name: 'article',
  waitOn(params) {
    return [
      import('/imports/client/article/article.html'),
      Meteor.subscribe('article', params._id)
    ];
  },
  whileWaiting() {
    this.render('layout', 'loading');
  },
  action(params, qs, article) {
    this.render('layout', 'article', { article });
  },
  data(params) {
    return ArticlesCollection.findOne({ _id: params._id });
  },
  onNoData() {
    this.render('notFound');
  }
});

Further Reading