Question

我的Ember应用程序中有一条资源路径，可以根据路径的模型钩子成功加载模型。在加载该模型时，我可以使用显示动画gif的加载路径让用户知道。

在同一视图中，我在该模型的hasMany关系中呈现列表项。作为一个可能重要的一点，视图中的列表实际上是使用抽象视图呈现的，该视图要求控制器使用特定属性名称而不是模型上实际关系属性的名称来返回关系中的项目。

问题：我能够显示关系项目，但是他们需要一两秒才能加载，在此期间没有向用户表明他们正在加载。有没有办法跟踪该关系的加载状态？

以下是一些涉及的代码：

// From router...
App.ItemRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('item', params.item_id);
  }    
});

// From item model...
App.Item = DS.Model.extend({
  name: DS.attr('string'),
  things: DS.hasMany('thing', {
    async: true
  })
});

// From controller...
App.ItemController = Ember.ObjectController.extend({
  myList: function() {
    return this.get('things');
  }.property('things')
});

// From view...
{{#each v in myList}}
  <div>{{v.id}}</div>
{{else}}
  <div>Your list is empty.</div>
{{/each}}

Answer 1

查看Promises中提供的标志：Ember.PromiseProxyMixin

使用isSettled：

可以实现您的要求

{{#if things.isSettled}}
  {{#each things}}
    {{id}}
  {{else}}
    Your list is empty
  {{/each}}
{{else}}
  {{!-- Show loading spinner here --}}
  Loading...
{{/if}}

为了使其正常工作，您需要触发things记录的请求。您可以在路由的afterModel回调中执行此操作：

App.ItemRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('item', params.item_id);
  },

  afterModel: function(model) {
    return model.get('things');
  }    
});

Answer 2

试试这个，我还没有测试过，但我认为它应该可行。

 // From controller...
 App.ItemController = Ember.ObjectController.extend({
   thingsLoaded : false,
   myList: function() {
       if(this.get('thingsLoaded').then){
           var self = this;
           return this.get('things').then(function(data){
              self.set('thingsLoaded', true);
           });
       } else {
           return this.get('things');  
       }
   }.property('things')
 });

Answer 3

我认为你应该创建两个函数

function loading(){
//display gif
}

function loadingOff(){
//hide gif
}

然后在需要时间加载的函数中添加这些函数。

EX：

function loadImage(){
loading();
//code
loadingOff();
}

如何在路径模型加载关系时显示加载指示器

3 个答案: