在 Ember.js 中，在路由中实现“加载”状态的正确钩子是什么？

Question

在加载位置模型时，我想在模板中显示加载/微调器消息。我无法做到这一点。

{{#if loading}}
  <div class="spinner"></div>
{{else}}
  <div>Here goes the position</div>
{{/if}}

给定路由器

App.Router.map(function() {
  this.resource('article', { path: '/:id' }, function() {
    this.route('position', { path: '*position_id' });
  });
});

我在ArticlePositionRoute 中的方法如下：

App.ArticlePositionRoute = Em.Route.extend({

  actions: {
    loading: function() {
      var controller = this.get('controller');
      if (controller) controller.set('loading', true);
      return false;
    }
  },

  setupController: function(controller, model) {
    controller.set('loading', false); // BEFORE _super
    this._super(controller, model);
    controller.set('loading', false); // AFTER _super
  },

  model: function(params) {
    return promiseThatTakesAWhile(); // slow fetch model
  },

  afterModel: function(model) {
    var self = this;
    return promiseThatTakesAWhile().then(function(result) {
      model.set('result', result);
      self.set('controller.loading', false); // THIS THROWS "Uncaught Error: Property set failed: object in path "controller" could not be found or was destroyed."
    });
  }

});

在afterModel中，控制器不可用，抛出Uncaught Error: Property set failed: object in path "controller" could not be found or was destroyed.

在setupController 中，当set 在之前 调用_super 时，如果我把它放在在 _super 之后，它与Error: Assertion Failed: Cannot delegate set('loading', false) to the 'content' property of object proxy <App.ArticlePositionController:ember726>: its 'content' is undefined. 一起吹@call，视图已经调用了didInsertElement 和errs，因为它在模板中找不到正确的div（基本上，为时已晚）。

设置/取消设置“加载”标志的正确钩子是什么？我想我在正确的位置有set loading true，但我不知道在哪里放置set loading false .

当the Ember docs 说actions: { loading: function(transition, originRoute) { // displayLoadingSpinner(); ... 时，如果文档中的示例已经完全开发，它会是什么样子？

Answer 1

您应该使用内置的加载路径。您可能认为它需要作为需要时间加载的资源的子路由存在，但这是不正确的，它需要是父资源的子路由（这将已经解决）。或者在您的情况下，加载路线需要以ArticleLoadingRoute 的形式存在。它会在任何紧随其下的资源/路由需要时间加载的任何时候显示。

这是一个示例，我强制两个资源需要一段时间才能加载

http://emberjs.jsbin.com/OxIDiVU/465/edit