ok, this might be a complicated one:
I have a controller that loads additional data depending on several options. In the corresponding template a component is called that shall display that data.
What I want to achieve is to display a loading state while loading that data.
I finally managed to do that with that (here very reduced) code:
(basicly I set a parameter on the promise-callbacks an pass that into the component)
// 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
}}
which gives me a loading State in that component which resolves once all the data is loaded. All fine til here.
Now here comes my problem:
I need to have the fetchedEvents computed property depetend on the model's related events - so that, when I add a new event, the list get's updated.
So I added model.events to the observed properties:
// controller
fetchedEvents: Ember.computed('filterEventsSwitchFuturePast', 'model.events', function() {
//....the rest is the same as before!
}),
Now the list get's updated, but my beutiful property loadingEvents seems bouncing between it's states. It starts not loading, then loads for a second, goes back to not loading - but with zero results! - and finally hits it's correct final state.
The result is a UI that keeps saying - no results - loading - no results - here's the results.
Not a realy lovely UI, I'd say.
The route's/component's/template's model is loaded and shown far before that happening, so I don't think hooking in there might be a solution.
Do you guys have any suggestions how I could solve/improve that?
Any other hooks I can get into?
I'm on Ember 2.0
Aucun commentaire:
Enregistrer un commentaire