Meteor + Iron Router: Render after pageRender

0
votes

I have been playing around with Meteor lately and i am loving it, but 5 minutes into a project i am having a problem with rendering templates after calling {{ pageRender }} (Taking note that specifically {{>renderPage }} only render what Iron Router was told to render and ignores any other calls.)

The current code below works perfectly fine since it is still basic configuration, but the footer template is getting called "before" the dynamic page is rendered, which is resulting in the footer appearing above all page content. I have also tried to move the footer text into the main.html fine but the footer is still rendered before the {{ renderPage }} content.

Iron Router Js:

Router.route('/', function () {
  this.render('Home', {
    //data: function () { return Items.findOne({_id: this.params._id}); }
  });
});

HTML source:

<head>
  <title>NDA Site</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>

<body>
    <!-- Render Navigation -->
    {{> navigation }}

    <!-- Render Page (Anything gets closed before render is called canceling grid out. Grid has been moved to each template for accuracy)-->
    <div class="renderPage-wrapper">{{ renderPage }}</div>

    <!--{{> footer }} 
    footer will not render after renderPage. Footer has been added to main.html as show below-->


        <div class="container"><div class="row">

            <div class="col-lg-6">
                <p>YourSite &copy; {{year}}. All rights reserved.</p>
            </div>

            <div class="col-lg-6 text-right">
                <p>Powered by: NDA Site 0.1.2</p>
            </div>

            </div></div>

</body>

Template source:

<template name="footer">


        <div class="container"><div class="row">

            <div class="col-lg-6">
                <p>YourSite &copy; {{year}}. All rights reserved.</p>
            </div>

            <div class="col-lg-6 text-right">
                <p>Powered by: NDA Site 0.1.2</p>
            </div>

            </div></div>
</template>

Any ideas of a work around? Or an explanation of why the render hierarchy is being ignored after the client runs {{ renderPage }}?

Sincerely, Willie (Doc) W.

2
javascripthtmlmeteoriron-router

2 Answers

0
votes

First of all your syntax is completely wrong, you should not add bootstrap to project explicitly , instead run meteor add mizzao:bootstrap-3 and delete them from head.

Instead of script tags in footer create footer.js and in it make

if(Meteor.isClient){
    Template.footer.helpers({
       year: function(){
          return new Date().getFullYear();
       }
}

And if you want everything to be under each other, wrap {{renderPage}} into some div which will hold place for it until template is loaded.

Also, do you have Home template? Because that's what you are calling in iron-router

0
votes

Ok i figured out a solution, which at the same time was me using Iron:router wrong(missing a step).

First a layout template needs to be defined.

<template name="layout">

  <div id="main-wrapper">

    {{>navigation }}


    <div class="container-fluid content">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 pull-right">
                {{>yield}}
            </div>

            <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 pull-left">
                {{>sidebar}}
            </div>

    </div>
</div>

    <!--{{>footer }} // Normally you would render your footer here at the bottom of the page. Since the project i am working on consist of a static sidebar i moved the {{>footer}} to {{>sidebar}} -->

  </div><!-- Particle JS -->


  <!--<script type="text/javascript" src="js/particles.js"></script>
  <script src="http://vincentgarreau.com/particles.js"></script>
  <script type="text/javascript" src="/js/app.js"></script>-->

</template>

Then a layout configuration needs to be set.

// Configure Iron:Router
Router.configure({
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',
  layoutTemplate: 'layout'
});

The main.html or yourProject.html which has your head and body should look something like this.

<head>
  <title>Foobar</title>
    <link rel="icon" href="http://www.aperturestudiosmedia.com/favicon.ico">

</head>

<body>
    <!-- Render Krater -->
</body>