[SOLVED] Sub routes with Layout

I’m setting up a super small admin Dashboard for my project (just listing some things) but I want to have a tabbed interface, eg. three sections: “Posts”, “Invites” and “Users”. I want to be able to have a site-wide layoutTemplate, but I also want to be able to have a Dashboard layoutTemplate, any tips on how to set this up?

Eg. the routes I would have would be:

A quick idea of what I want: http://cl.ly/aRT6

You could just make a template for the tabs and include it in for your invites, posts & users templates?

<template name="tabs">
    <!-- template code -->
</template>

<template name="invites">
    {{> tabs}}
    <!-- template code -->
</template>
1 Like

You might want to look at iron router regions

2 Likes

Exactly what I was looking for! Thanks!

@MazDev - very good point. I was struggling with this same issue posed by @michaelevensen and when I switched to regions it worked like a charm. I had initially created separate layouts for each of the sub routes and it was an ugly hack. Just adding my vote to your solution.

How did you solve the routing issue? Eg. individual routes looking like: ‘dashboard/invites/’, ‘dashboard/posts/’, ‘dashboard/users/’?

In the case you need to actually wrap the content in a secondary layout, I’ve solved this issue with custom block helpers.

Create a global layout:

<template name="globalLayout">
  <!-- header code -->
  
  {{#if UI.contentBlock}}
    {{> UI.contentBlock}}
  {{else}}
    {{> yield}}
  {{/if}}

  <!-- footer code -->
</template>

Now in Iron Router if you use globalLayout for the layout, it will yield here. Or, you can create a sub layout like this:

<template name="dashboardLayout">
  {{#globalLayout}}

    <div class="dashboard">
      {{> yield}}
    </div>

  {{/globalLayout}}
</template>

Now, in Iron Router you can use dashboardLayout for the layout, it will still use the global header / footer.

Something like :

Router.route('/dashboard/users',  {
  waitOn: function() {
      Meteor.subscribe('usersList');
  },
  action: function() {
    this.render('dashboard');
    this.render('usersPanel', {to: 'dashboardContent'});
  },
  name: 'usersPanel'
});
1 Like

This is exactly what I needed. Thanks! Just wanted to add to this for anyone else struggling with the same thing that for the “to” regions to work, specify individual yields in the template like this: {{> yield "dashboardContent"}}