CODEWITHSUNDEEP
ember.js
Murali
Murali

Reputation: 3542

Emberjs go back on cancel

I have a link to User displayed from various screens(From User List, User Groups etc.). When the link is clicked, User is presented to edit. When cancel button is pressed in the edit form, I would like to transition to previous screen userlist/group. How is this generally achieved in Emberjs.

Thanks, Murali

Upvotes: 13

Views: 7033

Answers (3)

bdombro
bdombro

Reputation: 1421

Here's my solution, which is very simple and high performance.

// file:app/routers/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  transitionHistory: [],
  transitioningToBack: false,

  actions: {
    // Note that an action, like 'back', may be called from any child!  Like back below, for example.

    willTransition: function(transition) {
      if (!this.get('transitioningToBack')) {
        this.get('transitionHistory').push(window.location.pathname);
      }
      this.set('transitioningToBack', false);
    },
    
    back: function() {
      var last = this.get('transitionHistory').pop();
      last = last ? last : '/dash';
      this.set('transitioningToBack', true);
      this.transitionTo(last);
    }
  }
});

Upvotes: 4

user663031
user663031

Reputation:

You need nothing more than

history.back()

One of the main design objectives of Ember, and indeed most OPA frameworks, is to work harmoniously with the browser's history stack so that back "just works".

So you don't need to maintain your own mini-history stack, or global variables, or transition hooks.

You can put a back action in your application router to which actions will bubble up from everywhere, so you can simply say {{action 'back'}} in any template with no further ado.

Upvotes: 24

Kalman
Kalman

Reputation: 8121

There is probably a way to DRY(don't repeat yourself) this up, but one way of doing it is to have 2 actions: willTransition which Ember already gives you and goBack which you define yourself. Then, there is a "global" lastRoute variable that you keep track of as follows:

App.OneRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition){
      this.controllerFor('application').set('lastRoute', 'one');
    },
    goBack: function(){
      var appController = this.controllerFor('application');
      this.transitionTo(appController.get('lastRoute'));
    }
  }
});

And your template would look as follows:

<script type="text/x-handlebars" id='one'>
  <h2>One</h2>
  <div><a href='#' {{ action 'goBack' }}>Back</a></div>
</script>

Working example here

Upvotes: 2

Related Questions