iron router reload specific header element

Question

I'm trying to reload a specific element in my Meteor app. I am new to Meteor, but I've at least gotten the client-side routing down to prevent reloading.

I'm basically trying to reload a small piece of text in the header, even though the header itself isn't reloading when the route changes.

Here's my router JS:

Router.configure({
  layoutTemplate: 'PageLayout',
  yieldTemplates: {
    'Footer': {to: 'Footer'},
    'Header': {to: 'Header'}
  }
});
Router.route('/', {name: 'Home'});
Router.route('/about');

Here's my layout:

<template name="PageLayout">
  <header>
    {{> yield "Header"}}
  </header>

  <section id="page-container">
    {{> yield}}
  </section>

  <footer>
    {{> yield "Footer"}}
  </footer>
</template>

And here's basically what my header template looks like:

<template name="Header">
  <span>'{{text}}'</span> <!-- this is what I'm trying to change when the route changes -->
  <nav id="main-menu">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</template>

Any suggestions?

Thanks.

Answer 1

Let's say you want that header to reflect the current route name. Just make a template helper that returns it:

Template.Header.helpers({
  text: function(){
    return Router.current().route.getName();
  }
})