如何在提取应用程序路径中的模型时显示加载屏幕

Question

给定这样的应用程序路径:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      setTimeout(function() {
        resolve();
      }, 3000);
    });
  }
});

如何在此模型挂钩等待时显示加载模板？

我试过这样的事情:

<script type="text/x-handlebars" id="loading">
  <h3>Loading...</h3>
</script>

但这仅在加载应用程序的子路径时显示.如何在应用程序本身仍在加载时显示加载模板？

谢谢.

Answer 1

你可以使用某种加载覆盖(可能是一些静态的html/css)和afterModel路由钩子:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      setTimeout(resolve, 3000);
    });
  },

  afterModel: function (model, transition) {
    $('.loading-overlay').fadeOut();
  }
});

您必须确定放置叠加层的最佳位置,但这应该有效.

工作示例:http://jsbin.com/rixukune/3

在文档中查看此钩子的详细信息:http://emberjs.com/api/classes/Ember.Route.html#method_afterModel