显示承诺的加载状态

好的，这可能是一个复杂的：
我有一个控制器，根据几个选项加载额外的数据。在相应的模板中，一个组件被称为应显示该数据。
我想实现的是在加载数据时显示一个loading状态。
我终于成功地做到这一点与（这里非常减少）代码：
（basicly我设置的参数上的承诺，回调的通说成部件）显示承诺的加载状态

// controller 
fetchedEvents: Ember.computed('filterEventsSwitchFuturePast', function() { 
    let _this = this; 
    this.set('loadingEvents', true); 
    if(this.get('filterEventsSwitchFuturePast')) { 
     let promise = this.store.query('event', {..some filters here...} }); 
     promise.then(function() { //promise resolved 
       _this.set('loadingEvents', false); 
      }); 
     return promise; 
    } else { 
     let promise = this.store.query('event', {..other filters here...}); 
     promise.then(function() { //promise resolved 
       _this.set('loadingEvents', false); 
      }); 
     return promise; 
    } 
}),

// template calling the component 
    {{event/event-list 
      events=fetchedEvents 
      isLoading=loadingEvents 
    }}

它给了我一个加载状态在该组件中，一旦所有的数据加载完成解析。一切都好，直到这里。

现在这才是我的问题：

我需要对fetchedEvents计算财产depetend模型的相关events - 这样，当我添加一个新的事件，列表获取的更新。
因此，我增加model.events观察到的属性：

// controller 
fetchedEvents: Ember.computed('filterEventsSwitchFuturePast', 'model.events', function() { 
    //....the rest is the same as before! 
}),

现在列表中获取的更新，但我美丽的温馨财产loadingEvents似乎反弹之间它的状态。它开始不加载，然后加载一秒钟，回到不加载 - 但结果为零！ - 最后达到了正确的最终状态。
结果是一个用户界面一直说- 没有结果 - 加载 - 没有结果 - 这里的结果是。
不是一个真正可爱的用户界面，我会说。

路由的/组件的/模板的模型在这种情况发生之前就被加载并显示出来，所以我不认为挂钩可能有解决方案。

你们有什么建议我可以解决/改善吗？
我可以进入其他钩子吗？

我在灰烬2.0

来源

2016-04-13 Jeff

你是如何试图使用' fetchedEvents属性/承诺在你的组件（它显然被称为“事件”）？请向我们展示JS或HBS或两者。有了承诺，像“加载”这样的标志通常是反模式，通常有更好的方法。关于我的头，最好让'fetchedEvents'成为一个观察者，它在filterEventsSwitchFuturePast发生变化时进行重新设置，并且在'query'完成后直接更新相关数据，但是如果不多看一点点就很难说的代码。 –

谢谢，我将我的代码重构为一个观察者，该观察者将重新获取的数据设置为另一个属性，并更新'加载'标志。这现在按预期工作！ – Jeff

我认为这是主叫方的解决的承诺义务，它们会传递给组件之前（事件列表）

fetchedEvents: [], 

somethingChanged: function() { 
    if(Ember.isNone(x) && Ember.isNone(y)) return; 

    this.set('isLoading', true); 
    var promise; 

    if(this.get('x')) { 
     promise = "firstFilter" 
    } else { 
     promise = "secondFilter" 
    } 

    promise.then(resolved => { 
     this.set('isLoading', false); 
     this.get('fetchedEvents').pushObject(resolved); 
    }, reportErrors); 

}.observes('model.events.[]', 'longNamedThingy')

来源

2016-04-14 05:56:34

是的，将我的代码重构为更新数据和加载状态的观察者完成了这项工作！谢谢！ – Jeff

显示承诺的加载状态

回答

相关问题