加载完成后，在渲染中删除模板余烬路由中的模板

Question

当路由需要等待数据时，我做了一个加载视图，这是我的路线

import Ember from 'ember';
import ENV from '../../config/environment';
export default Ember.Route.extend({
desaService: Ember.inject.service(),
model(){
return Ember.RSVP.hash({
currentlyLoading:true,
desas: this.get('desaService').find(ENV.defaultOffset, ENV.defaultLimit),
desaCount: this.get('desaService').count()
});
},
setupController(controller, model) {
this.controllerFor('backend.master-desa').set('desas', model.desas);
this.controllerFor('backend.master-desa').set('currentlyLoading', model.currentlyLoading);
this.controllerFor('backend.master-desa').set('desaCount', model.desaCount);
},
renderTemplate(controller, model){
let controller2 = this.controllerFor('backend.master-desa');
if(controller2.get('currentlyLoading')){
this.render('components/common/loading-view', {
into:'application'
});
}
},
actions:{
loading(transition, originRoute){
let controller = this.controllerFor('backend.master-desa');
controller.set('currentlyLoading', true);
transition.promise.finally(function() {
controller.set('currentlyLoading', false);
});
}
}
});

首先我设置 currentlyLoading true，然后将调用 renderTemplate 并在 application.hbs 中显示"components/common/load-view"。 这是工作，但我需要在加载操作完成后删除"组件/通用/加载视图"。 请帮我:(

Answer 1

您可以使用路由器的 disconnectOutlet 方法。您需要做的是调用以下命令来删除在钩子方法中呈现renderTemplate模板。

actions:{
loading(transition, originRoute){
let _this = this;
let controller = this.controllerFor('backend.master-desa');
controller.set('currentlyLoading', true);
transition.promise.finally(function() {
controller.set('currentlyLoading', false);
_this.disconnectOutlet({
outlet: '',
parentView: 'application'
});
});
}
}

但是，如果您运行应用程序，您可能会看到没有呈现任何内容。原因如下：

renderTemplate钩子是在model求解后运行的;因此在模型完全解析之前，您将看不到任何内容。 将运行renderTemplate钩子进行渲染;但是loading将触发操作中的事件，并且您将删除加载完成后将要呈现的模板。因此，您将无法通过这种设计方法实现您想要的。

您需要在完全解决model之前渲染一些内容;这在指南中进行了专门解释。我建议您复习一下，如果遇到一些问题，请多问几句。

我为您准备了以下 twiddle，说明了在完全解决model之前要显示的loading模板的用法，以及使用disconnectOutlet删除呈现给特定outlet的模板。我希望这能帮助您更好地理解。此致敬意。

Answer 2

你做错了，请阅读指南。您所需要的只是创建一个loading.hbs文件并将用于加载屏幕的html放在那里。

此外，如果您想创建一个加载指示器，该指示器将在资产加载和应用程序启动时显示，您可以使用此插件

此外，您的setupController可以简化为controller.setProperties(model);。 设置属性文档