表现出承诺'加载状态

showing promises' loading state

本文关键字：加载 状态 承诺      更新时间：2024-06-22

好吧，这可能是一个复杂的问题：
我有一个控制器，它根据几个选项加载额外的数据。在相应的模板中，调用一个组件，该组件将显示该数据
我想要实现的是在加载数据时显示loading状态
我终于用这个（这里是非常精简的）代码做到了这一点：
（基本上，我在promise上设置了一个参数，回调到组件中的传递）

// 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
    }}

这给了我该组件中的加载状态，该加载状态在加载所有数据后解析。在这里之前一切都很好。

现在我的问题来了：

我需要根据模型的相关events计算fetchedEvents属性，这样，当我添加新事件时，列表就会更新
因此，我在观察到的属性中添加了model.events：

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

现在列表得到了更新，但我的有用属性loadingEvents似乎在它的状态之间跳跃。它开始不加载，然后加载一秒钟，然后返回到不加载-，但结果为零-并最终达到正确的最终状态
结果是一个UI一直在说-没有结果-加载-没有结果，下面是结果
我认为这不是一个真正可爱的UI。

路由的/组件的/模板的模型早在发生之前就已经加载并显示了，所以我认为挂接可能没有解决方案。

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

我在Ember2.0

我认为调用者有义务在承诺传递给组件（事件列表）之前解决这些承诺

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')
相关文章：