Question

我尝试使用iron:router的yieldTemplates属性在同一版块上呈现多个模板。

根据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区域仍为空。我根本没有控制台错误。

您对我的代码中有什么问题有任何疑问吗？

Answer 1

自编写该教程以来，语法可能已更改，但根据IronRouter guide，您应该这样做：

{{> yield 'top'}}

而不是这个

{{> yield region='top'}}

铁：路由器的yieldTemplates无法正常工作

1 个答案: