Redirect from editing to parent does not occur (repeatedly)

Question

The layout of my user interface is a list (“sub-navigation”) / details (exit “exit”), as described in one of my previous questions .

Details sometimes contain a read-only version of the model, and sometimes there is an “editing” version of the data displayed in the main outlet.

One of my router resources is nested:

App.Router.map(function () { // ... this.resource('offers', function () { this.resource('offer', { path: '/:offer_id' }, function() { this.route('edit'); }); }); // ... }); 

Before listing the source code for my routes, let me explain my problem.

Everything works fine: I can open the page without an offer, just a list. I look through the offer and the offer is shown. I click "Edit Offer" and I can edit and save the changes. After saving to my controller, I redirect (back) to the offer page (read-only):

 // in the save function: var offer = this.get("content"); // ... offer.on('didUpdate', function () { controller.transitionToRoute("offer", offer); }); // ... store.commit(); 

But the next page, which should be a detail of the proposal, is empty. The page header section still contains the template from the editing route, and the main outlet is empty.

How can I let Ember re-render the OfferRoute template?

Here are my routes that contain various renderTemplate calls:

 App.OffersIndexRoute = Ember.Route.extend({ renderTemplate: function () { this.render('offer-list-title', { into: 'application', outlet: 'page-title' }); this.render('offer-list-content', { into: 'application' }); } }); App.OffersRoute = Ember.Route.extend({ model: function () { return App.Offer.find(); }, renderTemplate: function () { this.render('offer-list', { into: 'application', outlet: 'sub-navigation' }); } }); App.OfferRoute = Ember.Route.extend({ setupController: function (controller, model) { controller.set('content', model); controller.set('offerTemplates', App.OfferTemplate.find()); controller.set('contentBlockTemplates', App.ContentBlockTemplate.find()); }, model: function (params) { return App.Offer.find(params.offer_id); }, renderTemplate: function () { this.render('offer-title', { into: 'application', outlet: 'page-title' }); this.render('offer-content', { into: 'application' }); } }); App.OfferEditRoute = Ember.Route.extend({ renderTemplate: function () { this.render('offer-edit-title', { into: 'application', outlet: 'page-title', controller: 'offer' }); this.render('offer-edit', { into: 'application', controller: 'offer' }); } }) 

---

UPDATE (decision)

With the help of the two answers below and the check / error and debugging I got it working. I basically added OfferIndexRoute , but I also had to define model using this.modelFor("offer") .

I do not know if this is the most elegant solution, but it works. So here is the route code I'm using now:

 App.OfferRoute = Ember.Route.extend({ model: function (params) { return App.Offer.find(params.offer_id); }, setupController: function (controller, model) { controller.set('content', model); controller.set('offerTemplates', App.OfferTemplate.find()); controller.set('contentBlockTemplates', App.ContentBlockTemplate.find()); }, renderTemplate: function () { this.render('offer-title', { into: 'application', outlet: 'page-title' }); this.render('offer-content', { into: 'application' }); } }); App.OfferIndexRoute = Ember.Route.extend({ model: function () { return this.modelFor("offer"); }, renderTemplate: function () { this.render('offer-title', { into: 'application', outlet: 'page-title' }); this.render('offer-content', { into: 'application' }); } }); App.OfferEditRoute = Ember.Route.extend({ renderTemplate: function () { this.controllerFor("offer").set("editMode", true); this.render('offer-edit-title', { into: 'application', outlet: 'page-title', controller: 'offer' }); this.render('offer-edit', { into: 'application', controller: "offer" }); // } }) 

Answer 1

Change the template of your offer (read-only) in App.OfferIndexRoute ... Since App.OfferRoute is a resource (acts as the parent for its nested routes), the transition from OfferEditRoute to OfferRoute will be redirected to OfferIndexRoute ...

 App.OfferIndexRoute = Ember.Route.extend({ renderTemplate: function () { this.render('offer-title', { into: 'application', outlet: 'page-title' }); this.render('offer-content', { into: 'application' }); } }); 

Here is the one I tried with just going over ... http://jsbin.com/uxojek/12/edit

Answer 2

Save the model and setupController inside offerRoute and move only renderTemplate for the IndexRoute clause.

     App.OfferRoute = Ember.Route.extend ({
         setupController: function (controller, model) {
             controller.set ('content', model);
             controller.set ('offerTemplates', App.OfferTemplate.find ());
             controller.set ('contentBlockTemplates', App.ContentBlockTemplate.find ());
         },
         model: function (params) {
             return App.Offer.find (params.offer_id);
         }
      });
     App.OfferIndexRoute = Ember.Route.extend ({
     renderTemplate: function () {
         this.render ('offer-title', {into: 'application', outlet: 'page-title'});
         this.render ('offer-content', {into: 'application'});
     }
     });