mercredi 30 novembre 2016

Ember - Nested child route loses model upon route refresh/reload

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 defined in them. summary.hbs has 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




Aucun commentaire:

Enregistrer un commentaire