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

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 并将 'components/common/loading-view' 显示为 application.hbs。这是可行的，但我需要在加载操作完成后删除 'components/common/loading-view'。请帮助我:(

Answer 1

你做错了，read the guide。您只需要创建一个 loading.hbs 文件并在其中放置 html 用于加载屏幕。

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

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

Answer 2

您可以使用路由器的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 hook 会运行做渲染；但是，操作中的 loading 事件将被触发，您将删除加载完成后即将呈现的模板。因此，您将无法通过这种设计方法实现您想要的。

您需要在 model 完全解析之前渲染一些东西； guide 中对此进行了具体说明。如果您运行遇到一些问题，我建议您仔细阅读并多问。

我已经为您准备了以下 twiddle，它说明了 loading 模板的用法以显示直到 model 完全解析，以及 disconnectOutlet 的用法以删除呈现给特定 outlet 的模板。我希望这会帮助你更好地理解。最好的问候。

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

remove template in renderTemplate ember route after loading is finished

javascript

handlebars.js

ember.js

ember-router

ember-components