Ember - 路由刷新/重新加载时嵌套的子路由丢失模型 [英] Ember - Nested child route loses model upon route refresh/reload

问题描述

我有一个嵌套的路由，当刷新失去模型并显示空白页。代码如下：

路由器：

  app.Router.map（function（）{
 this.resource（'main'，{path：''}，function（）{
 this.route（'summary'，{path： '/ main / summary'}，function（）{
 this.route（'details'，{path：'/ details'}）
}）
}）
} ）
  

文件结构：

  -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 
  

关于代码简介：
模板 main.hbs 和 application.hbs 中定义了{{outlet}}。
summary.hbs 也有{{outlet}}，所以当url / main / summary被击中时，它只显示summary / index.hbs中的内容，当url /主要/总结/细节被击中，它只显示一个细节通过渲染总结。

我的ajax调用在主要概要的模型钩子-route ，而在等待的时候，我显示加载模板。
main-summary-details-controller.js 扩展自 main-summary-index-controller.js ，以便可以重用代码。
类似地，main-summary-details-route.js 通过模型获得与 main-summary-route.js 中的模型相同的模型钩在细节路线作为 -

  model：function（）{
 return this.modelFor（'mainSummary'）
} 
  

这是因为ajax调用将汇总和路由的数据组合在一起。

问题陈述：当我点击url main / summary时，我得到页面，然后从那里点击，goto main / summary / details，我看到页面更新了细节，但是当我在浏览器中手动刷新（/ main / summary / details）时，该页面是空白的，我观察到在模型钩子中没有返回模型详细信息路线时间。

我对解决方案的想法：
我以为这样做会很理想，因为刷新后会要求汇总路由先（在父子关系中），调用ajax（加载在一起），当数据通过时，它将显示详细信息。但是我猜这没有发生。

我没有得到它，以至于出了什么问题。我想到的是，我需要在详细路线中捕获刷新事件，并再次调用ajax，以便它获取数据。

Ember版本已使用 - 1.13.0

解决方案

我通过在刷新详细信息页面上再次调用ajax来解决这个问题。我确实做了一个检查，如果this.modelFor（'mainSummary'）可用，然后返回此模型，否则从ajax获取模型。这对我来说是有效的。

但我仍然在想，理想情况下应该是本身，即我刷新，ajax on / main / summary应该有一旦模型可用，就被称为自身，从而呈现细节。

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

解决方案

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, i.e. the as i refresh, the ajax on /main/summary should have been called itself and thereby rendering details, once model was available.

这篇关于Ember - 路由刷新/重新加载时嵌套的子路由丢失模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！