FlowRouter/BlazeLayout how to structure my templates?

1

I’ve had some trouble getting BlazeLayout to render as I expect so posting this to hopefully get some quick help.

I want to build a simple chat application similar to a few of the chat app tutorials out there for meteor (like Slack)

So for example when switching channels, I’d like to dynamically swap the “chat view” area, like below:

I’ve tried the following basic layout, but the dynamic templates are not being rendered (inspecting the HTML in chrome, there not there at all)

<head>
...
</head>

<body>
    {{> appLayout}}
</body>

<template name="appLayout">
    <div class="container-fluid main-container" style="height:100%;">
	<div class="row" style="height:100%;">
	    {{> leftBar}}
	    {{> middleContent}}
        </div> 
    </div> 
</template>

<template name="leftBar">
    <div id="leftbar-wrapper" class="col-xs-3">
        <ul>
	    <li>Channel 1</li>
	    <li>Channel 2</li>
	    <li>Channel 3</li>
	</ul>
    </div>
</template>

<template name="middleContent">
    <div id="middlecontent-wrapper" class="col-xs-9">
	{{> Template.dynamic template=chatAreaTemplate}}
	{{> chatBox}}
    </div>
</template>

<template name="testMiddleContentOne">
    <div>Hello from template one</div>
    <a href="/anotherChannel">go to next channel</a>
</template>

<template name="testMiddleContentTwo">
    <div>Hello from template two</div>
</template>

and routes:

if (Meteor.isClient) {

    FlowRouter.route('/', {
	name: 'home',
	action: function() {
	    BlazeLayout.render('middleContent', { chatAreaTemplate: 'testMiddleContentOne'});
	}
    });
    FlowRouter.route('/anotherChannel', {
	name: 'anotherChannel',
	action: function() {
            BlazeLayout.render('middleContent', { chatAreaTemplate: 'testMiddleContentTwo' });
	}
    });
}

What is wrong with this code? Is this the best way to achieve this kind of layout? If not, what would be?

2

I have dealt with this kind of issue on an application I am currently developing and I am dealing with it in a much different manner. Something along the lines of this:

<template name="mainpage">
    <ul>
        <li><a href="#chatroom1">Chatroom1</a></li>
        <li><a href="#chatroom2">Chatroom2</a></li>
    </ul>
    <div id="chatroom1">
        {{> chatroom1Template}}
    </div>
    <div id="chatroom2">
        {{> chatroom2Template}}
    </div>
</template>

<template name="chatroom1Template">
    (insert chatroom messages here)
</template>

<template name="chatroom2Template">
    (insert chatroom messages here)
</template>

Not sure if it matters, but I am using Materialize’s tabs to accomplish this. Should be doable without it though afaik. Goodluck!