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?