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

首先我将currentLoading设置为true，然后调用renderTemplate并显示＆＃39; components / common / loading-view＆＃39;进入application.hbs。这是工作，但我需要删除＆＃39; components / common / loading-view＆＃39;加载动作完成后。请帮帮我:(

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完全解决之前渲染一些东西;这具体在guide中解释。如果你遇到一些问题，我建议你回过头来问问更多。

我为您准备了以下twiddle，其中说明了在loading完全解决之前显示的model模板的使用以及使用disconnectOutlet删除模板呈现给特定outlet的内容。我希望这会帮助你更好地理解。最诚挚的问候。

Answer 2

你做错了，read the guide。您所需要的只是创建一个loading.hbs文件并将html用于加载屏幕。

此外，如果您要创建一个加载指示符，该加载指示符将在加载资源并启动应用程序时显示，您可以使用this addon

此外，您的setupController可以简化为controller.setProperties(model);。 setProperties doc

加载完成后，在renderTemplate ember路由中删除模板

2 个答案: