ember.js - 如何在 Emberjs 1.0 中延迟 LoadingRoute / LoadingTemplate 的渲染

Question

通过loadingRoute 功能，我们可以很好地在 Ember.js 应用程序中显示加载指示器。但是，如果您的加载时间通常很短怎么办？闪烁的加载指示器会使页面转换变得过于嘈杂。因此我认为最好延迟加载层的实际渲染，直到超过某个阈值。有无数种方法可以做到这一点，但最好的方法是什么？

Answer 1

我能想到的一种延迟模板的好方法LoadingRoute是通过使用Ember.run.laterwhich来延迟模板的渲染，setTimeout但通过在 runloop 中运行更安全。

App.LoadingRoute = Ember.Route.extend({
  renderTemplate: function() {
    Ember.run.later(this, function() {
      this.render();
    }, 1000); // put here the treshold you might find appropriate in ms
  }
});

如果model钩子在延迟超时之前解决了承诺，那么LoadingRoute根本不会出现，这是您可能想要的行为。

希望能帮助到你。

Answer 2

我找到的解决方案是：

App.LoadingRoute = Em.Route.extend({
  deactivate: function() {
    var timer = this.get('timer');
    if (timer)
      Em.run.cancel(timer);
  },

  renderTemplate: function(controller, model) {
    var self = this;
    // Only render the loading indicator after 0.5s
    var timer = Em.run.later(this, function() {
      self.render('loading')
    }, 500);
    this.set('timer', timer);
  }
});

如果在超过阈值之前解决了承诺，它将取消渲染。