Ember js，在后台加载内容时显示微调器

Question

EmberJS 是否有办法在我的页面中加载某些内容时在某处显示加载模板？

例如，我有一个包含很多歌曲艺术家的页面，他们每个人都有很多歌曲。我加载了艺术家的页面，很好，但在后台我正在加载关于每个人的歌曲的信息。 我只是需要一个加载微调器，告诉我网站正在加载一些东西（例如，在 Chrome 开发人员工具的 "Network" 选项卡中有一些待处理的东西。 ..)

如何以如此优雅的 Emberjs 方式做到这一点？

Answer 1

您可以像这样观察 Ember.PROMISEPROXYMIXIN 的 isPending 属性：

{{#if artist.songs.isPending}}
  loading...
{{/if}}

Answer 2

据我所知（并且基于对 API 文档的快速阅读）Ember 没有提供实现此目的的内置方法。除非我错了，否则这意味着您需要自己实施请求状态跟踪。

您可以在 Ember 的适配器层中执行此操作（例如，在 app/adapters/application.js 中添加代码），但最简单的解决方案可能是直接使用 jQuery。您可以使用一些 API：

jQuery.active，表示未完成的请求数
ajaxStart and ajaxStop

我建议创建一个 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;
  }),

});

我还没有测试过这段代码，所以我不确定它在实践中是否有效:)

Ember js，在后台加载内容时显示微调器

Ember js, show spinner when something is loading in background

asynchronous

ember.js

ember-data

loading

ember-cli