Iron Router Not Rendering Template in Yield

Question

So I love Meteor, but have had several issues with Iron Router. This time it seems I can't get Iron Router to render a template into the yield region. Initially everything renders fine, but when I click a link to go home ({{pathFor ...}} the URL changes, but nothing changes in the view. This is very weird since I have checked that it is calling the route and I have explicitly written and tested this.render('...') to try to force it to render the template I want (this does not work). Furthermore it renders properly once the page is reloaded with the changed URL (i.e. it renders the home page). Any help would be much appreciated. Thanks!

Here is router.js(updated):

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading'
});
//Basic Routes
Router.route('/',function(){
  this.render('main');
},{name:"main"});
Router.route('/Board',function(){
  this.render('board');
},{name:"board"});
Router.route('/Board/:chat',function(){
  this.render('board');
},{name:"board.chat"});
//On before actions
var OnBeforeActions = {
    loginRequired: function(){
      if(!Meteor.userId()) {
        this.render('main');
      }else{
        this.next();
      }
    },
    mobileOrDesktop: function(){
      if(findBootstrapEnvironment() != 'xs'){
        this.render('chat',{to:'chat'});
      }else{
        this.render('chat');
      }
      this.next();
    }
};
Router.onBeforeAction(OnBeforeActions.mobileOrDesktop, {
    only: ['board','board.chat']
});
Router.onBeforeAction(OnBeforeActions.loginRequired, {
    only: ['board','board.chat']
});
Router.onBeforeAction('loading');
//Bootstrap state helper
function findBootstrapEnvironment() {
    var envs = ["xs", "sm", "md", "lg"],    
        doc = window.document,
        temp = doc.createElement("div");
    doc.body.appendChild(temp);
    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];
        temp.className = "hidden-" + env;
        if (temp.offsetParent === null) {
            doc.body.removeChild(temp);
            return env;
        }
    }
    return "";
}

Here is my layout where the yield is:

<template name="layout">
    <!--Desktop-->
    <div class="hidden-xs full-height">
        {{> navbar}}
        {{> notifications}}
        {{> yield}}
    </div>
    <!--Mobile-->
    <div class="hidden-sm hidden-md hidden-lg">
        {{> notifications}}
        {{> yield}}
    </div>
</template>
<template name="loading">
Loading...
</template>

Here is the file with the other yield in it:

<template name="board">
    <!--Desktop-->
    <div class="container hidden-xs full-height">
        <div class="row" style="height:90%;">
            <!--Projects-->
            <div class="col-sm-4 full-height">
                {{> projects}}
            </div>
            <!--Chat-->
            <div class="col-sm-8 full-height">
                {{> yield "chat"}}
            </div>
        </div>
        <div class="row" style="position:absolute;bottom:0px;left:20px;">
            {{> footer}}
        </div>
    </div>
    <!--Mobile-->
    <div class="hidden-sm hidden-md hidden-lg full-width">
        <!--Projects-->
        {{> projects}}
    </div>
</template>

Thanks!!!

First of all, your code is a little deprecated. The Iron Router API changed since version 1.0. Can you updated it first and see if it helps? Second, to tell you more we will probably need to se you html code as well. — Tomasz Lenarcik
Thanks a lot. I changed the routing syntax but nothing different happened. — ggobieski

ggobieski ggobieski · Accepted Answer · 2015-01-08T14:59:16

So here's the problem, after a bunch of fiddling and what not, I realized that having two yields (although one is hidden) is not supported. Stupid mistake! Make sure you only have one yield section!!

Iron Router Not Rendering Template in Yield

1 Answers