One of my child template is rendering in all routes/links when I click on the browser back/forward button. My route is defined as :
this.resource('analytics', {path: '/analytics'}, function(){
this.resource('analyticsRuns', {path: ':exerciseRunId/analyticsRuns'},function(){
this.resource('analyticsRun',{path: ':runId'});
});
});
and my templates are as follows :
<script type="text/x-handlebars" data-template-name="analytics">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analytics/index">
some content in analytics index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns/index">
some content in analytics runs index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRun">
some content in analytics run index
</script>
My templates are more complex than these but I wanted to give you a gist of what issue I am facing. So when I go from analytics to analyticsRuns and to browser back , then there are no issues, but when I go from analytics -> analyticsRuns -> analyticsRun and then go back to analytics using browser back button, the analyticsRuns template shows up after the analytics template is rendered. Now if I do forward, the analyticsRuns template seems to be appended in all the other routes. I am not sure if I am defining my handlebars wrong which is causing this issue, or maybe the problem lies somewhere else. But if you have any suggestion on how to avoid this issue then I would appreciate it a lot.
In my app setup, "analytics" is not actually a parent resource. Analytics just provides a filter value to "analyticsRuns" by which the master/parent data is loaded.
Thanks, Dee
