Nested child route loses model upon route refresh/reload

Design
1

I have a nested route, which when refreshed loses the model and displays blank page. Code as below:

Router:

app.Router.map(function(){
    this.resource('main',{path:''}, function(){
        this.route('summary',{path:'/main/summary'},function(){
            this.route('details',{path:'/details'})
        })
    })
})

File structure:

-app
 -route
  -main-route.js
  -main-summary-route.js
  -main-summary-index-route.js
  -main-summary-details-route.js
  -main-loading-route.js

 -controller
  -main-controller.js
  -main-summary-controller.js
  -main-summary-index-controller.js
  -main-summary-details-controller.js

 -templates
  -main
   -summary
    -index.hbs
    -details.bhs
   -summary.hbs
   -loading.hbs
  -main.hbs
  -application.hbs

Brief about code: Templates main.hbs and application.hbs have {{outlet}} defined in them. summary.hbs has {{outlet}} in it as well, so that when url /main/summary is hit, it shows only contents from summary/index.hbs and when url /main/summary/details is hit, it only shows the one in details by rendering into summary.

My ajax call goes in model hook of “main-summary-route”, and while its waiting, i show loading template. “main-summary-details-controller.js” extends from “main-summary-index-controller.js” so that code could be reused. Similarly, “main-summary-details-route.js” gets the same model as the one in “main-summary-route.js” via model hook in details route as -

model: function(){
    return this.modelFor('mainSummary')
}

This is because the ajax call brings together the data for both summary and routes together.

Problem: When I hit url main/summary, i get the page and then from there, on a click, goto main/summary/details , i see the page updated with details as well, but when i refresh this (/main/summary/details) manually in browser, the page is blank, i observe that there is no model returned in model hook in details route this time.

My thoughts on solution: I thought that this would work ideally, since on refresh, it would ask for summary route first (being in parent child relation), call ajax (loading alongside) and when data comes through, it would show details. But i guess thats not happening.

I am not getting it, as to whats going wrong. The thought which comes to my mind is that, do i need to probably catch the refresh event in details route and call ajax again, so that it fetches data.

Ember version used - 1.13.0

2

Child routes inherit their parent route’s model by default, so there’s no need to use modelFor to just use the parent route’s model.

Not sure what the actual issue is, can you reproduce it in a twiddle?

3

Oh. So, how can i setup the model ( the one which child is inheriting) for the child. OR is is that i just need to setupController and the model will be taken care of.

I will prepare a twiddle soon. But just to brief on issue, the “details.hbs” loads fine with model which i hit url “/main/summary/details”, but when i refresh it, the page goes blank, because i see that it loses model, which i had set in model hook of details route through “return this.modelFor(‘mainSummary’)”.

I was assuming, that in this refresh process, first the summary.hbs would be called (as its parent of details and summary route only calls the ajax and gets response) and it will get data and then render details.hbs, but that didn’t happen, as the model is lost.