I am using the new blaze-integration
branch of IR and have made the necessary changes for an existing application. I have in one of my templates a yield region:
<div>
{{> yield region='signup-detail'}}
</div>
I would like to set this region in a route configuration using yieldTemplates
. My route is configured like so:
this.route('signUpInfo', {
path: '/sign-up',
template: 'signUp-form',
yieldTemplates: _.extend({}, mainYieldTemplates, {
'information': {to: 'signup-detail'}
})
});
mainYieldTemplates = {
'footer': { to: 'footer' },
'header': {to: 'header'}
};
My template 'information' is not rendering into signup-detail
. Only happens with the new shark branch and IR blaze, has anything changed with Yield templates ?
The footer and header templates are set correctly.
EDIT: Template Layout
<template name="basicLayout">
{{> yield region='header'}}
<div class="container">
<div class="row">
<div class="col-md-12 col-centered padding-top-four-em">
{{> yield}}
</div>
</div>
<hr>
<footer>
{{> yield region='footer'}}
</footer>
</div>
</template>
EDIT 2: SignUp Form template
<template name="signUp-form">
<div class="col-md-12 signup-container">
{{>signUpSideBar}}
<div class="col-md-9 signup-content gray-border-box">
{{> yield region='signup-detail'}}
</div>
</div>
</template>
Note: The signUp-form template has a region signup-detail
. This is where my route signUpInfo
needs to render the information
template to that region. This used to work in IR before the blaze-integration.
I am using the new blaze-integration
branch of IR and have made the necessary changes for an existing application. I have in one of my templates a yield region:
<div>
{{> yield region='signup-detail'}}
</div>
I would like to set this region in a route configuration using yieldTemplates
. My route is configured like so:
this.route('signUpInfo', {
path: '/sign-up',
template: 'signUp-form',
yieldTemplates: _.extend({}, mainYieldTemplates, {
'information': {to: 'signup-detail'}
})
});
mainYieldTemplates = {
'footer': { to: 'footer' },
'header': {to: 'header'}
};
My template 'information' is not rendering into signup-detail
. Only happens with the new shark branch and IR blaze, has anything changed with Yield templates ?
The footer and header templates are set correctly.
EDIT: Template Layout
<template name="basicLayout">
{{> yield region='header'}}
<div class="container">
<div class="row">
<div class="col-md-12 col-centered padding-top-four-em">
{{> yield}}
</div>
</div>
<hr>
<footer>
{{> yield region='footer'}}
</footer>
</div>
</template>
EDIT 2: SignUp Form template
<template name="signUp-form">
<div class="col-md-12 signup-container">
{{>signUpSideBar}}
<div class="col-md-9 signup-content gray-border-box">
{{> yield region='signup-detail'}}
</div>
</div>
</template>
Note: The signUp-form template has a region signup-detail
. This is where my route signUpInfo
needs to render the information
template to that region. This used to work in IR before the blaze-integration.
- Did you get this working? I was having trouble with yield regions, but copied what you did and it worked for me. – bgmaster Commented Apr 22, 2014 at 4:20
-
@bgmaster, I still don't have this working. I am using
action
to render my regions instead of theyieldTemplates
option now. I am trying to isolate the issue and see where things are wrong – Warz Commented Apr 22, 2014 at 14:39 - Can you post your whole layoutTemplate? – bgmaster Commented Apr 22, 2014 at 15:34
- @bgmaster I have added my layout template that I use for 95% of my routes. – Warz Commented Apr 23, 2014 at 15:04
2 Answers
Reset to default 9I don't know it's a perfect way to render.But it works for me
route.js
Router.route('/', function () {
// use the template named ApplicationLayout for our layout
this.layout('ApplicationLayout');
// render the Post template into the "main" region
// {{> yield}}
this.render('Post');
// render the PostAside template into the yield region named "aside"
// {{> yield "aside"}}
this.render('PostAside', {to: 'aside'});
// render the PostFooter template into the yield region named "footer"
// {{> yield "footer"}}
this.render('PostFooter', {to: 'footer'});
});
ApplicationLayout.html
<template name="ApplicationLayout">
<header>
<h1>{{title}}</h1>
</header>
<aside>
{{> yield "aside"}}
</aside>
<article>
{{> yield}}
</article>
<footer>
{{> yield "footer"}}
</footer>
</template>
main.html
<template name="Post">
<p>
{{post_content}}
</p>
</template>
<template name="PostFooter">
Some post specific footer content.
</template>
<template name="PostAside">
Some post specific aside content.
</template>
Looks like your {{> yield region='signup-detail'}}
isn't in your yieldTemplate, so the router can't find the signup-detail region to insert your 'information' template.
{{> yield}}
in your yieldTemplate is rendering 'signUp-form' (from your template:
assignment in your route.
If your 'signup-detail' template is a template within 'signUp-form', just use {{> signup-detail}}
.
If you want 'signup-detail' to be re-used across multiple templates as a part of the layoutTemplate, then add {{> yield region='signup-detail'}}
to your yieldTemplate.