Question

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

// 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计算属性取决于模型的相关events - 这样，当我添加新事件时，列表会更新。<登记/> 所以我将model.events添加到了观察到的属性中：

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

现在列表已更新，但我的美丽财产loadingEvents似乎在其州之间蹦蹦跳跳。它开始没有加载，然后加载一秒钟，返回到不加载 - 但结果为零！ - 最后点击它正确的最终状态。
结果是一个用户界面继续说 - 没有结果 - 加载 - 没有结果 - 这里是结果。
我不是说真的可爱的UI。

路线/组件/模板的模型在发生之前已经加载并显示，因此我不认为可能存在解决方案。

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

我在 Ember 2.0

Answer 1

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

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')

显示承诺＆＃39;装载状态

1 个答案: