当我的页面中的某些内容正在加载某些内容时，EmberJS 有没有办法在某处显示加载模板？
例如，我有一个页面，其中包含许多歌曲艺术家，每个人都有许多歌曲。我加载了艺术家的页面，很好，但在后台我正在加载有关每个人的歌曲的信息。 我只需要某个地方的加载微调器，告诉我该网站正在加载某些内容（例如，Chrome 开发者工具的“网络”选项卡中有待处理的内容...）
如何以如此优雅的 Emberjs 方式做到这一点？
【问题讨论】：
标签： asynchronous ember.js ember-data loading ember-cli
你可以像这样观察Ember.PROMISEPROXYMIXIN的isPending属性：
{{#if artist.songs.isPending}}
loading...
{{/if}}
【讨论】：
isPending 改变了，不是吗？如果我正在加载 Artists.songs，应用程序路由的根级别中的 isPending 是什么？
isPending 或任何传达模型状态的 mixin 属性。 emberjs.com/api/classes/Ember.PromiseProxyMixin.html
据我所知（基于对 API 文档的快速阅读）Ember 没有提供实现此目的的内置方法。除非我错了，否则这意味着您需要自己实现请求状态跟踪。
您可以在 Ember 的适配器层中执行此操作（例如，在 app/adapters/application.js 中添加代码），但最简单的解决方案可能是直接使用 jQuery。您可以使用一些 API：
我建议创建一个Ember.Service 来跟踪这个状态——然后你可以将它注入任何需要根据这个信息呈现模板的控制器或组件中。您的服务可能如下所示：
import Ember from 'ember';
export default Ember.Service.extend({
init() {
this._super(...arguments);
const invalidateRequestInProgress = () => {
this.notifyPropertyChange('dummyProperty');
}
$(document).ajaxStart(invalidateRequestInProgress);
$(document).ajaxStop(invalidateRequestInProgress);
},
requestInProgress: Ember.computed('dummyProperty', function() {
return Ember.$.active !== 0;
}),
});
我还没有测试过这段代码，所以我不确定它是否能在实践中工作:)
【讨论】：
notifyPropertyChange 是必要的吗？使用Ember.computed 是性能证明吗？ return Ember.$.active !== 0; 究竟是什么？我们有好的表现吗？究竟是什么加载了 Ember 的默认加载 (guides.emberjs.com/v2.8.0/routing/loading-and-error-substates)，因为在 ajax 调用服务器期间没有加载，然后我们不得不求助于这些手动方法？
notifyPropertyChange 告诉 Ember 任何依赖于 'dummyProperty' 的计算属性都需要重新计算。这是缓存失效。 (2) 使用 Ember.computed 可以在模板中检查 requestInProgress。 (3) Ember.$.active !== 0; 与 $.active !== 0; 相同，除了使用 Ember 命名空间的 jQuery 副本——以防页面上定义了多个 $s。对于$.active 的含义，请查看我的答案中的链接。
notifyPropertyChange 与计算属性一起使用可能会让新手感到困惑。我相信这是最好的风格，因为它更懒而且更实用，但你也可以通过将 invalidateRequestInProgress 定义为 () => { this.set('requestInProgress', Ember.$.active !== 0); } （这是急切的）来不同地编写它。