Implementing a “conditional” back button in ember.js

Question

I am working on an ember.js (version 1.2) based mobile application and I am trying to find the most idiomatic way of implementing the global menu toggle/back button pattern that

Answer 1

I hate to be the bearer of bad news, but I also hate to leave you hanging.

Ember doesn't keep track of the history, there isn't a general use case for it (especially since the browser keeps track of it for you).

Fortunately you can monitor route changes in the application controller, something like this should get you started (Note I didn't spend time working out an awesome solution that works perfectly, just showed you the basics you need for it, I'll let you figure out the workflow that works well for you)

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

App.ApplicationController = Em.Controller.extend({
  history: [],

  hasHistory: function(){
    return this.get('history.length')>1;
  }.property('history.length'),

  watchHistory: function(){
    this.get('history').pushObject(this.get('currentPath'));
  }.observes('currentPath'),

  actions: {
    goBack: function(){
       // implement your own history popping that actually works ;)
       if(this.get('hasHistory')){
         this.get('history').popObject();
         window.history.back(); 
         this.get('history').popObject(); // get rid of route change here, don't need it
       }
     }
   }
 });