iron:router's yieldTemplates not working

Question

I'm trying to use iron:router's yieldTemplatesproperty to render multiple templates on the same layout.

According to this tutorial, we should be abble to do something like this:

template.html

<template name="complexLayout">
  <div class="left">
    {{> yield region="menu"}}
  </div>


  <div class="main">
    {{> yield}}
  </div>
  <div class="bottom">
    {{> yield region="footer"}}
  </div>
</template>

route.js

this.route('home', {
  path: '/',
  layoutTemplate: 'complexLayout',
  yieldTemplates: {
    'myMenu': {to: 'menu'},
    'myFooter': {to: 'footer'}
  }
});

---

I tried to do it, but the yieldTemplates part doesn't work.

Here is the relevant code:

Router.js

Router.map(function() {
    this.route('home', {
        path: '/home',
        controller: 'homeController'
    });
});

Controllers.js

baseController = RouteController.extend({
    layoutTemplate: 'baseLayout'
});

homeController = baseController.extend({
    yieldTemplates: {
        'homeNavTop': {to: 'top'}
    }
});

Templates.html

<template name="baseLayout">
    <main>
        <!-- NAV TOP -->
        <div id="nav-top" class="hide-on-large-only light-blue darken-3 white-text">
            <div class="row nomargin valign-wrapper hide-on-large-only">
                {{> yield region='top'}}
            </div>
        </div>
        <!-- / NAV TOP -->

        <!-- BODY -->
        <div class="row nomargin">
            <div class="col s12">
                {{> yield}}
            </div>
        </div>
        <!-- / BODY -->
    </main>
</template>

<template name="homeNavTop">
    <a href="#" data-activates="slide-out" class="menu button-collapse btn-flat waves-effect">
        <i class="material-icons">menu</i>
    </a>
</template>

As explained, the BODY part works fine. The top region remains empty. I have no console errors at all.

Do you have any clue of what is wrong in my code?

Answer 1

Perhaps the syntax has changed since that tutorial was written, but according to the IronRouter guide you should be doing this:

{{> yield 'top'}}

rather than this

{{> yield region='top'}}