The biggest key I was missing is that iron-router replaces the <body>
of your document. Moving my template out of the <body>
of the HTML document makes it work. Here is the corrected code:
HTML:
<head>
<title>carpool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<template name="mainContent">
<div id="wrap">
{{> page}}
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
{{> header}}
</div>
<div class="row-fluid">
<div class="span10">
{{> yield}}
</div>
<div class="span2">
{{#if currentUser}}
{{> leaderboard}}
{{/if}}
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
{{> footer}}
</div>
</div>
</template>
<template name="page">
{{#if showAddEventDialogue}}
{{> addEvent}}
{{/if}}
{{#if showConfigLoginService}}
{{> configureLoginService}}
{{/if}}
{{#if showCalendarEventDetailsDialogue}}
{{> calendarEventDetailsDialogue}}
{{/if}}
</template>
JS:
/* Only execute if this is the client */
if (Meteor.isClient) {
// Client subscriptions
Meteor.subscribe('allCarpoolEvents');
Meteor.subscribe('allCarpoolDebts');
Meteor.subscribe('allUsers');
Router.configure({
autoRender: true
});
// Define Routes
Router.map(function () {
this.route('calendar', {
path:'/',
template: 'calendar',
layoutTemplate: 'mainContent'
});
this.route('calendar', {
path:'/calendar*',
template: 'calendar',
layoutTemplate: 'mainContent'
});
this.route('list', {
path:'/list*',
template: 'list',
layoutTemplate: 'mainContent'
});
});
}