加載完成后，在renderTemplate余燼路線中刪除模板

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並在application.hbs中顯示“ components / common / loading-view”。 這是工作，但我需要在加載操作完成后刪除“ components / common / loading-view”。 請幫我 ：（

Answer 1

您可以使用路由器的disconnectOutlet方法。 您需要做的是調用以下命令，以刪除renderTemplate hook方法中呈現的模板。

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

但是，如果您運行您的應用程序，可能會看到什么都沒有呈現。 原因如下：

在解決model之后運行renderTemplate掛鈎； 因此，在模型完全解析之前，您將看不到任何東西。 將運行renderTemplate掛鈎進行渲染； 但是操作中的loading事件將被觸發，並且自加載完成后，您將刪除將要呈現的模板。 因此，您將無法通過這種設計方法實現所需的功能。

您需要的是在model完全解析之前渲染一些東西。 並在指南中對此進行了詳細說明。 我建議您仔細閱讀一下，並詢問是否遇到一些問題。

我已經准備好以下玩弄了你，說明了兩個使用loading模板顯示，直到model完全解決和使用disconnectOutlet來移除呈現為一個特定的模板outlet 。 希望這可以幫助您更好地理解。 最好的祝福。

Answer 2

您做錯了，請閱讀指南 。 您所需loading.hbs就是創建一個loading.hbs文件，然后在其中放置html進行加載。

另外，如果您要創建一個加載指示器，該加載指示器將在資產加載和應用程序啟動時顯示，則可以使用此插件

同樣，您的setupController可以簡化為controller.setProperties(model); setupController 。 setProperties文檔