[SOLVED] Sub routes with Layout


#1

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


#2

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>

#3

You might want to look at iron router regions


#4

Exactly what I was looking for! Thanks!


#5

@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.


#6

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


#7

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.


#8

Something like :

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

#9

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"}}