iron:router 的 yieldTemplates 不工作

iron:router's yieldTemplates not working

我正在尝试使用 iron:routeryieldTemplates属性 在同一布局上呈现多个模板。

根据 this tutorial,我们应该能够做这样的事情:

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'}
  }
});

我试过了,但是 yieldTemplates 部分不起作用。

相关代码如下:

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>

如前所述,BODY 部分工作正常。 top 区域仍然是空的。 我根本没有控制台错误。

你知道我的代码有什么问题吗?

自从该教程编写以来,语法可能发生了变化,但根据 IronRouter guide,您应该这样做:

{{> yield 'top'}}

而不是这个

{{> yield region='top'}}