Ember JS – transitionTo route and then display Feedback message

Since i am a bit newbie and just starting doing some frontend, i am having an issue with EmberJS transitionTo().
The problem is that when i click "delete" inside details of the product, it displays the feedback message there, and then it transits to the home page.
I want to transit first to home page if i am at details, and then display the feedback message.

the code i have:

delete: function(system,) {
  const self = this;
  this.get('data').del(systemId)
    .then(function() {
      self.transitionTo('home');
      self.setFeedbackSuccess(self.currentModel, self.get('intl').t('delete.success'));
    }).then(() => self.refresh())
    .then(() => {
      self.transitionTo('home');
      self.setFeedbackSuccess(self.currentModel, self.get('intl').t('delete.success'));
    })
    .catch((errorObject) => {..})
    .catch((errorObject) => self.errorHandler(errorObject, self.currentModel));
},

The first call to the function is where the feedback is displayed at the detail page, if i remove it from there, after .then(() => self.refresh()) it will show nothing from feedback, unless i am at the home page, and delete from there.

1 thought on “Ember JS – transitionTo route and then display Feedback message”

  1. So there are a couple of ways you can do this. To start off transitionTo returns a thenable object so you can do something like:

      this.get('data').del(systemId)
        .then(() => this.transitionTo('home'))
        .then(() => this.setFeedbackSuccess(this.currentModel, this.get('intl').t('delete.success'));
    

    This assumes setFeedbackSuccess hooks into some global notification system that would be visible from the new route. Alternatively you can decorate the transition object

      this.get('data').del(systemId)
        .then(() => {
           let transition = this.transitionTo('home'));
           transition.data.feedback = { 
             model: this.currentModel, 
             message: this.get('intl').t('delete.success')
           };
           return transition
        });
    

    Then in your home route, in one of the hooks like activate or afterModel you can call setFeedbackSuccess

    afterModel(model, transition) {
      this._super(model, transition); // or super.afterModel(model, transition) if using native classes
      if (transition.data.feedback) {
        this.setFeedbackSuccess(transition.data.feedback.model, transition.data.feedback.message);
      }
    }
    
    Reply

Leave a Comment