I'm having an issue with the template not rendering when I click the back button. From what I've read this is an issue because the parent template never goes away and the child routes should be rendered into the parent route. However, I want the users to have a clean page when they add records or edit records. I'm currently rendering the templates into named outlets on the main application template.
In this case, newrecord and editrecord should be rendered into form. However, I want the URL to be localhost/form/formID/newrecord so the user knows they're still in the form.
Question: What is the best way to achieve this? Do I have to change the routes as child resources or move them as higher level resources? Is there a better way to achieve what I want?
App.Router.map(function(){
this.resource('home', { path: '/' });
this.resource('form', { path: '/forms/:form_id' }, function() {
this.route('newrecord', { path: '/newrecord' });
this.route('editrecord', {path :'/editrecord' });
});
});
Template
<script type="text/x-handlebars" data-template-name="application">
{{ outlet }}
{{ outlet newrecord }}
{{ outlet editrecord }}
</script>
