11

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.

Warz
  • 7,386
  • 14
  • 68
  • 120
  • Did you get this working? I was having trouble with yield regions, but copied what you did and it worked for me. – bgmaster Apr 22 '14 at 04:20
  • @bgmaster, I still don't have this working. I am using `action` to render my regions instead of the `yieldTemplates` option now. I am trying to isolate the issue and see where things are wrong – Warz Apr 22 '14 at 14:39
  • Can you post your whole layoutTemplate? – bgmaster Apr 22 '14 at 15:34
  • @bgmaster I have added my layout template that I use for 95% of my routes. – Warz Apr 23 '14 at 15:04

2 Answers2

9

I 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>
Sajin M Aboobakkar
  • 4,051
  • 4
  • 30
  • 39
0

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.

bgmaster
  • 2,313
  • 4
  • 28
  • 41
  • I don't think i understand your solution. I have updated my question to show you what the template `signUp-form` looks like – Warz Apr 24 '14 at 19:35
  • Remove the line: {{> yield region='signup-detail'}} and instead just use {{> signup-detail}}. That should fix the issue. Yield regions only work on layoutTemplates...signUp-form is a regular template, not a layoutTemplate. – bgmaster Apr 26 '14 at 02:04
  • If i just use `{{> signup-detail}}` then I can only have one template named `signup-detail` inside my `div.signup-content`. What I am trying to do is render different templates inside that div for different routes. Does that make sense ? I am trying to treat `signUp-form` like a layout template. – Warz Apr 26 '14 at 02:09
  • I see, so you basically want nested layout templates, correct? I'm not aware of that being possible, but I haven't tried it either. Did you try contacting the Event-minded guys via github? For a temporary solution, you can just have multiple layout templates. Copy 'basicLayout', add 'signUp-form' to it, and rename it something like 'basicSignUpLayout'. Then, in your route, just add the line "layoutTemplate: 'basicSignUp-form'". It's not the most elegant solution, but it will get you where you want to be. – bgmaster Apr 26 '14 at 14:16
  • 1
    Yes, i am looking for nested layout templates which I believe worked at one point. I made an issue on that github solution but it hasn't had any traction. Like I said, i am using `action` function to render templates – Warz Apr 26 '14 at 16:52
  • I see. Yeah I guess I can't really help then. Good luck! – bgmaster Apr 27 '14 at 17:11