0

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

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);
      });
    }
  }
});

首先我将 currentLoading 设置为 true，然后将调用 renderTemplate 并将“components/common/loading-view”显示到 application.hbs 中。这是工作，但我需要在加载操作完成后删除“组件/通用/加载视图”。请帮我 ：（

4

2 回答 2

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你需要的是在完全解决之前渲染一些东西；这在指南中有具体说明。如果您遇到一些问题，我建议您仔细阅读并询问更多信息。

我为您准备了以下小题，它说明了loading模板的用法以显示直到model完全解决，以及disconnectOutlet删除模板的用法，该模板呈现给特定的outlet. 我希望这能帮助你更好地理解。此致。

于 2017-04-15T09:47:08.673 回答
0

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

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

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

于 2017-04-15T09:25:22.353 回答