I'm using Flow Router and Blaze Renderer for a simple website (think blog / brochureware).
I'm using FlowRouter.path() to create links on my menu elements. The url changes as expected when these links are clicked and the action() method on the route is fired. However the templates don't seem to be refreshed and the template helpers aren't fired.
The route in my /lib/route.js file is
const about = FlowRouter.group({
prefix: '/about'
});
about.route('/:pageSlug/:subSectionSlug', {
action: (params) => {
console.log('action() fired :' + params.pageSlug + ' :' + params.subSectionSlug);
BlazeLayout.render( 'applicationLayout', {
main: 'basicPage',
});
},
name: 'pageSubsection',
});
Then my templates looks like -
<template name="applicationLayout">
{{> Template.dynamic template=main}}
</template>
<template name="basicPage">
<div id="pageWrapper">
...
<aside class="leftBar subSectionMenu">
{{> sidebar }}
</aside>
...
</div>
</template>
<template name="sidebar">
<ul class="pageMenu">
{{#each subSections }}
{{> sidebarItem}}
{{/each}}
</ul>
</template>
<template name="sidebarItem">
<a class="sidebarItemAnchor" href="{{ href }}">
<li class="sidebarItem .hoverItem {{#if isSelected }} selected {{/if}}">
{{title}}
<span class="sidebarArrow"></span>
</li>
</a>
</template>
With a simple helper to add the selected class to the li element -
Template.sidebarItem.helpers({
href() {
const subSection = this;
const params = {
pageSlug: subSection.pageSlug,
subSectionSlug: subSection.slug,
}
retu FlowRouter.path('pageSubsection', params, {});
},
isSelected() {
const slug = FlowRouter.current().params.subSectionSlug;
console.log('ruing isSelected with ' + slug);
if (this.slug === slug) {
retu true;
} else {
retu false;
}
}
});
I think I must be misunderstanding how (and when) templates are rendered.
What do I need to do to re-render these templates when the route changes?
