Ember加载模板仅适用于页面刷新 [英] Ember loading template works only on page refresh

问题描述

  Router.map（function（）{
 //登录页面（登录/注册）
 this.route（'home'，{path：'/'}）; 
 
 //验证页面
 this.route（'webappFrame '，{path：'/ app'}，function（）{
 this.route（'feed'，{path：'feed'}）; 
 this.route（'photoDetail'，{path ：'photo / detail /：id'}）; 
}）; 
}）; 
  

其中feed和photoDetail都有一个返回承诺的模型钩子（来自服务器）;
我在/ template文件夹中有一个loading.hbs模板;

在feed和photoDetail路由上的页面刷新之后，加载模板正确显示;
，但是当在路线之间导航时，它不再显示（插座保持白色未解决承诺已解决）;

我使用ember-cli 2.3。 0-beta.1（但也尝试1.13.14稳定）与ember 2.3.0;
在官方的ember文档中写入它应该始终遍历模板树，直到它找到一个加载模板;
有人可以告诉我这里有什么问题吗？

更新------------------- ---------------------------------

  // feed model hook 
 model：function（params，transition）{
 return this.store.query（'photo'，{type：'feed' }）; 
} 
 
 // photoDetail模型钩子
模型：function（params，transition）{
 var self = this; 
 
返回Ember.RSVP.hash（{
照片：self.store.find（'photo'，params.id），
评论：self.store.query（' comment'，{id：params.id}）
}）; 
}，
  

和Feed模板：

  {{每张照片为| item |}} 
 {{photo-item item = item}} 
 {{/ each}} 
  

然后照片项目组件：

  {{＃link-towebappFrame.photoDetailitem.id}} 
< img class =photoImagesrc ={{imageurl item.hash type =相片'}}> 
 {{/ link-to}} 
  

其中{{imageurl}}只是一个帮助者创建图像的路径;
这里我通过item.id到链接（传递项目本身），以强制在输入详细信息时重新加载照片（为了获得评论）

现在，我添加了templates / webapp-frame / load.hbs，它可以工作;
的事情是，加载模板在整个应用程序中始终是相同的;所以我希望只有一个，而不是在每个/ templates子文件夹中复制一份...

解决方案

每个路由加载模板，它总是routename-loading.hbs，似乎你没有创建匹配的模板，这就是为什么你只看到一个白页（默认）。如果您不确定哪些模板是必需的，或者如何命名，请安装ember检查器并检查路线选项卡，您可以看到Ember的期望值以及应如何命名。

I have in my Ember app this routes:

Router.map(function() {
    // landing page (login/register)
    this.route('home', {path: '/'});

    // authenticated pages
    this.route('webappFrame', {path: '/app'}, function() {
        this.route('feed', {path: 'feed'});
        this.route('photoDetail', {path: 'photo/detail/:id'});
    });
});

where both "feed" and "photoDetail" have a model hook that return a promise (records coming from the server); I have a loading.hbs template in the /template folder;

After a page refresh on both "feed" and "photoDetail" routes, the loading template is correctly displayed; but when navigating between the routes, it is not shown again (the outlet remains white untile the promise is resolved);

I use ember-cli 2.3.0-beta.1 (but also tried 1.13.14 stable) with ember 2.3.0; In the official ember docs is written that it should always traverse the templates tree up until it finds a loading template; can someone show me what's wrong here?

UPDATE ----------------------------------------------------

// feed model hook
model: function(params, transition) {
    return this.store.query('photo', {type: 'feed'});
}

// photoDetail model hook
model: function(params, transition) {
    var self = this;

    return Ember.RSVP.hash({
        photo: self.store.find('photo', params.id),
        comments: self.store.query('comment', {id: params.id})
    });
},

and in feed template:

{{#each photo as |item|}}
    {{photo-item item=item}}
{{/each}}

and then the photo-item component:

{{#link-to "webappFrame.photoDetail" item.id}}
    <img class="photoImage" src="{{imageurl item.hash type='photo'}}">
{{/link-to}}

where {{imageurl}} is just an helper that creates the path for the image; here i pass "item.id" to the link-to (instad of passing "item" itself) to force the reload of the photo when entering detail (in order to get also comments)

right now, I've added templates/webapp-frame/loading.hbs and it works; the thing is that the loading template is always the same in the whole app; so I expected to have only one instead of having a copy of it in every /templates subfolder...

解决方案

Ember handles the loading templates per route, its always "routename-loading.hbs", it seems you have not created the matching templates that´s why you only see a white page (default). If you´re not sure which templates are necessary or how they have to be named, install ember inspector and check the routes tab, there you can see what ember expects and how it should be named.

这篇关于Ember加载模板仅适用于页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！