Question

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

例如，我有一个包含许多歌曲艺术家的页面，每个都有很多歌曲。我加载艺术家的页面，很好，但在后台我加载有关每个人的歌曲的信息。 我只需要一个装载微调器，它告诉我网站正在加载某些内容（例如，在＆＃34;网络＆＃34; Chrome开发者工具的标签中有待处理的内容......）< / p>

如何以优雅的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和ajaxStop

我建议创建Ember.Service来跟踪此状态 - 然后您可以将其注入任何需要根据此信息呈现模板的Controller或Component中。您的服务可能如下所示：

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，在背景中加载某些东西时显示微调器

2 个答案: