iron:router 的 yieldTemplates 不工作
iron:router's yieldTemplates not working
我正在尝试使用 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
区域仍然是空的。
我根本没有控制台错误。
你知道我的代码有什么问题吗?
自从该教程编写以来,语法可能发生了变化,但根据 IronRouter guide,您应该这样做:
{{> yield 'top'}}
而不是这个
{{> yield region='top'}}
我正在尝试使用 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
区域仍然是空的。
我根本没有控制台错误。
你知道我的代码有什么问题吗?
自从该教程编写以来,语法可能发生了变化,但根据 IronRouter guide,您应该这样做:
{{> yield 'top'}}
而不是这个
{{> yield region='top'}}