灰烬-嵌套子路线在刷新/重新加载时丢失模型

Question

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 statement : 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

Answer 1

I did solve this by eventually calling ajax again on refreshing the details page. I did place a check though, that if "this.modelFor('mainSummary')" is available then return this model only, otherwise get model from ajax. This worked for me.

But I am still wondering, that ideally it should have been by itself, ie the as i refresh, the ajax on /main/summary should have been called itself and thereby rendering details, once model was available.