Question

I observe a undesired behaviour when it comes to the browser back button and emberjs. If the user clicks on the back button, the page shows twice the rendered handlebar template.

In case that the history is long enough, that “works” even several times and the page gets longer and longer. Somebody seen that issue already (and even solved it)?

My application is currently quite what is shown by Trek at http://trek.github.com/ except that I moved to the new router API of pre4.

Versions

• emberjs 1.0 pre4
• handlebars 1.0 rc1

Answer 1

Follow-up to my own question. There are two issues in my code. One of them I tracked down and share here the solution in case somebody have similar issues.

I had a model definition like

App.Member.reopenClass({
  allMembers: [],
  findAll: function(){
    $.ajax({
      url: 'https://api.company.com/members',
      dataType: 'json',
      context: this,
      success: function(response){
        response.data.forEach(function(member){
          this.allMembers.addObject(App.Member.create(member))
        }, this)
      }
    })
    return this.allMembers;
  }
});

The allMembers: [] was a reference that retained all members. Upon going back/forth, members for reloaded from the backend and stored again on allMembers.

To resolve this one, just define allMembers in findAll:

App.Member.reopenClass({
  findAll: function(){
    var allMembers = [];
    $.ajax({
      url: 'https://api.company.com/members',
      dataType: 'json',
      context: allMembers,
      success: function(response){
        response.data.forEach(function(member){
          this.addObject(App.Member.create(member))
        }, this)
      }
    })
    return allMembers;
  }
});

---

There is a second issue that is most probably also related to the way I combined the routes. I will post on it as soon as I have the solution.

Update, 2013-01-22

Ok, the second issue has been found as well and emberJS + back button now works perfectly. Again, I would like to quickly summarize what the problem was in case that somebody stumbles over it as well.

The routing definition looked as follows:

App.Router.map(function() { 
  this.resource("areas", { path: "/areas" });   
  this.resource("area",  { path: "/areas/:refId" }, function() {
    this.route("new",    { path: "/areas/new" });   
});

Furthermore, ‘new’ and ‘area’ used the very same view and controller. So, the issue was between the parent route ‘area’ and its subroute ‘new’. The attempt to combine all together, and do some magic within the controller to distinguish which case it is, is just not recommended…

So, solution was:

• use mixins to avoid code duplications (both, ‘new’ and ‘area’ use some Google Geocoder stuff)
• create a nice and simple routing as shown below.

And the code would be

App.Router.map(function() { 
  this.route("areas",   { path: "/areas" });
  this.route("area",    { path: "/areas/:refId" });
  this.route("newarea", { path: "/area/new"});
});

That’s it. Enjoy or comment. Always glad to get input from experts