Browser back not render my previous page

Question

Here is my code. I am facing two issues. 1. Not rendering my formList when I click browser back button from form 2. When I refreshing the page, its not calling the render method again.

App.Router.map(function() {
    this.resource('formList', { path: '/formList' }, function() {
        this.route('form');
    });
});

App.IndexRoute = Ember.Route.extend({

    redirect : function() {
        this.transitionTo('formList');
    }
});

App.FormListFormRoute = Ember.Route.extend({

    renderTemplate: function(){
        this.render('formListForm', {
            into:'application',
            outlet: 'appBody'
        });
    }
});

App.FormListRoute = Ember.Route.extend({

    renderTemplate: function(){
        this.render('formList', {
            into:'application',
            outlet: 'appBody'
        });
    }
});

Answer 1

formList is a parent to formListForm. It should exist as such in the dom. Unfortunately when you visit formListForm you are removing formList from the dom, but Ember isn't aware of that, and is under the impression, due to your router that formList already exists in the page, so it doesn't waste any time re-rendering what already should exist.

All that being said, manually rendering isn't necessary. Ember by default will render each route/resource down the tree into the empty {{outlet}} of the parent resource. Starting from the application template (the root of your application or /). I've reworked your example

Application Template

  <script type="text/x-handlebars" data-template-name='application'>
    <h2> Welcome to Ember.js</h2>

    {{link-to 'Form List Form' 'formList.form'}}

    {{outlet}}
  </script>

Form List Template

  <script type="text/x-handlebars" data-template-name="formList">
    <h2 class='formList'> Form List</h2>
    <h4 class='formList'>Info that always shows up in the form list</h4>
    {{outlet}}
  </script>

Form List Index Template

   <script type="text/x-handlebars" data-template-name="formList/index">
   <h4 class='formListIndex'>Info that only shows up in the form list when visiting /formList</h4>
  </script>

Form List Form Template

  <script type="text/x-handlebars" data-template-name="formList/form">
   <h4 class='formListForm'> Viewing the form route</h4>
  </script>

Example to show it off

http://emberjs.jsbin.com/rayocovi/1/edit