顯示承諾的加載狀態

好的，這可能是一個複雜的：
我有一個控制器，根據幾個選項加載額外的數據。在相應的模板中，一個組件被稱爲應顯示該數據。
我想實現的是在加載數據時顯示一個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

顯示承諾的加載狀態

回答

相關問題