Question

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

Answer 1

我可以想到延迟LoadingRoute的一个好方法是使用Ember.run.later作为setTimeout来延迟模板的渲染，但是通过在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 } });内运行可以更加安全runloop。

model

如果LoadingRoute挂钩在延迟超时之前解析了承诺，则{{1}}根本不会显示，这是您可能需要的行为。

希望它有所帮助。

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

如果在超过阈值之前解析了promises，它将取消渲染。

如何在Emberjs 1.0中延迟LoadingRoute / LoadingTemplate的渲染

2 个答案: