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

【问题标题】：remove template in renderTemplate ember route after loading is finished加载完成后删除 renderTemplate ember 路由中的模板
【发布时间】：2017-04-15 08:25:34
【问题描述】：

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

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 并在 application.hbs 中显示“components/common/loading-view”。这是工作，但我需要在加载操作完成后删除“组件/通用/加载视图”。请帮帮我:(

【问题讨论】：

标签： javascript ember.js handlebars.js ember-router ember-components

【解决方案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 的使用删除呈现给特定@987654334 的模板@。我希望这能帮助你更好地理解。最好的问候。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：