Use parent property in subroute


#1

Here’s how router.js file looks :

...    
this.route('institute', function() {
     this.route('profile', { path: '/profile/:id' });
     this.route('edit', { path: '/edit/:id/' }, function() {
         this.route('contact');
         ...
     });
       ...
});
...

And here’s the route for edit:

export default Ember.Route.extend( {
    model: function(params) {
        return Ember.RSVP.hash({
            id: params.id,
            institute: this.store.findRecord('institute', params.id),
        });
    },
    setupController(controller, models) {
        this._super(controller, models);
        controller.set('institute', models.institute);
        controller.set('instituteId', models.id);
    },
});

How to use the parent ( edit ) model in the subroute ( contact )?
I’ve tried this:

export default Ember.Route.extend({
    model: function() {
        this.modelFor('edit')
    },
    setupController(controller, models) {
        this._super(controller, models);
        controller.set('institute', models);
    },
});

But nothing. How to get data in the view, say edit.hbs

<h1>Contact : {{insitute.phone}}</h1>

#2
  1. You need to return in the “contact” route model hook. return this.modelFor('edit');
  2. Your “edit” route model hook returns an RSVP hash, so that’s what your “contact” route will get. So in the “contact” route setupController() hook, you’ll need to repeat the same two “sets”.
controller.set('institute', models.institute);
controller.set('instituteId', models.id);

Also, you’ll be able to get the same param.id from within the controller/templates by this.get('institue.id') / {{institue.id}}. So, you don’t necessarily need to return the RSVP.hash() from your model() hook (but it depends on your needs I suppose).