4

Ember.jsとHandlebars.jsを使用するアプリケーションに取り組んでいます。ページが最初に読み込まれるときに、テンプレートの表示が少し遅れることがあることに気づきました。javascriptがHTMLを作成する必要があるため、これが発生することは理にかなっています。ページが最初に読み込まれると、空白のページが読み込まれたように見えますが、突然すべてが表示されます。

正直なところ、これは私が生きることができる問題ですが、それでも私には少し厄介なようです。私は物事を分析しすぎているかもしれませんが、他の誰かがこれに気づき、ページの読み込みをより「自然」に見せるための推奨事項がありますか？

4

1 に答える 1

4

上でコメントしたように、ページのレンダリング中、データのロード中などにスピナーを表示できます。例として、ビューがレンダリングされるまでスピナーを表示する Mixin を以下に示します。

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

  classNameBindings: ['isLoaded'],

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

データがロードされるのを待ちたい場合 (ビューを表示するためにルーターを使用すると仮定):

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

そしてそれをあなたのビューに混ぜてください：

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
}
于 2012-11-10T21:37:17.077 に答える