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

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

1 个答案: