Iron Router LayoutTemplate displaying Extra Template

Hi,

I am new to MeteorJS and currently building an application that also utilises the iron-router package and unsure what I am doing wrong when it comes to iron router layouts.

I have defined the following within my main.js file:

Router.configure({
    layoutTemplate: 'ApplicationLayout'
});

and the following within my main.html file:

<template name="ApplicationLayout">
    {{> yield "navbar"}}
    <div class="container">
        {{> yield "form"}}
        {{> yield "main"}}
    </div>
</template>

Using the above info, I’ve added the following Router.route within my main.js file:

Router.route('/:_id', function () {
    this.render('navbar', {
        to: 'navbar'
    });
    this.render('website_details', {
        to: 'main',
        data: function() {
            return Websites.findOne({_id: this.params._id});
        }
    });
});

I have also created a new template called website_details within my main.html file but when I run my app to display this Router.route to ‘main’, apart from displaying the navbar to ‘navbar’ and website_details to ‘main’, it is also displaying my ‘form’ as well, even though the above Router.route does not include this and do not understand why?

Can anyone pls assist as I basically assumed I would just see both ‘navbar’ and ‘main’ alone templates and not the ‘form’ template for this route.

Thanks.

Hi,

Can anyone pls assist or do I need to provide more info?

Sorry, both Meteor and Iron Router are new to me so just wondering if no one no longer uses iron router anymore?

Thanks.

Hi @tonyf,

I’ve never tried having a {{> yield regionName}} and then not giving it anything in the route! It seems you’re hitting some fallback i-r behavior where if the yield is not provided anything to render it tries to render a template whose name == regionName. Very interesting! Or is it just displaying the string “form”?

A couple alternatives spring to mind:

  1. Create a blank template and render that into form in your route. That puts all the control in your route definition.
  2. Wrap the {{> yield}} with an {{#if }} that decides whether or not the region needs to be rendered. That puts the logic in your template.

In your design, are the form and main supposed to ever coexist or is your intention to render one or the other? In that case then an {{#if }}{{else}}{{/if}} block would seem to make the most sense.

Hi @michelfloyd,

Really appreciate your help.

FYI, I actually have a template that I render to “form” but on this route, I don’t actually reference it as I only reference navbar to navbar and website_details to main.

Unless the template I render to “form” is cached somehow and doesn’t clear on other routes that don’t reference it, then this could be the reason why it is appearing, when it shouldn’t.

I will try the alternatives that you have mentioned in your reply and come back to you.

To answer your other query: [quote=“michelfloyd, post:3, topic:19533”]
In your design, are the form and main supposed to ever coexist
[/quote]

The answer is Yes but just confused as to why it displays within a route that I don’t make reference to.

Thanks again.

I would recommend moving away from iron-router, which is no longer the recommended routing package for Meteor, while your app is in its early stages. If you read the Meteor Guide you’ll learn the basics of routing using flow router: http://guide.meteor.com/routing.html. One immediate upside is that flow router is also significantly easier to use and learn. No strange “yields” and multiple hooks and events to deal with.

Hi @rahul,

Thanks for the reply and understand what you are saying but the only reason I was using iron-router was purely b/c it was part of a four week Meteor course I was doing.

I just wanted to get it working properly and couldn’t work out what I was doing wrong.

Thanks.

I remember several times stepping through the i-r code in the debugger trying to understand its internal magic… it taught me a lot of stuff that I’m not sure I really wanted to know.