ember.js - Ember.js 的模板加载延迟

Question

我正在开发一个使用 Ember.js 和 Handlebars.js 的应用程序。我注意到，当页面首次加载时，显示模板可能会有一点延迟。这是有道理的，因为 javascript 必须创建 HTML。当页面第一次加载时，看起来就像加载了一个空白页面，然后突然一切都出现了。

老实说，这是一个我可以忍受的问题，但对我来说仍然有点尴尬。我可能只是过度分析了一些事情，但是有其他人注意到这一点吗？有没有人对如何使页面加载显得更“自然”有建议？

Answer 1

正如我上面评论的，您可以在页面渲染、加载数据等时显示旋转器。作为示例，下面是一个 Mixin，它在 View 呈现之前显示旋转器:

App.ShowSpinnerWhileRendering = Ember.Mixin.create({
  layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'),

  classNameBindings: ['isLoaded'],

  didInsertElement: function() {
    this.set('isLoaded', true);
    this._super();
  }
});

如果您想要等待数据加载(假设您使用路由器来显示 View ):

App.ShowSpinnerWhileRendering = Ember.Mixin.create({
  layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'),

  classNameBindings: ['isLoaded'],

  isLoaded: function() {
    return this.get('isInserted') && this.get('controller.isLoaded');
  }.property('isInserted', 'controller.isLoaded'),

  didInsertElement: function() {
    this.set('inserted', true);
    this._super();
  }
});

并将其融入您的 View 中:

App.ApplicationView = Ember.View.extend(App.ShowSpinnerWhileRendering, {
 // ...
});

然后定义一些 CSS 规则，以在具有 showSpinner 类的元素上显示加载微调器(或其他内容)，并在它也具有 isLoaded 类时隐藏它:

.loading{
  background-image: url("spinner.png") 
  background-color: #DFDFDF
}

.is-loaded .loading {
  /* back to default styling, e.g. */
  background-image: none
  background-color: white
}