We have a list of items in our app. Those items each have a delete action. Here’s a simple example:
title date actions Second post 2015-08-12 [delete] First post 2015-06-06 [delete]
When the user hits delete, we want to show the pending delete to the user, and notify them if it fails. What is the best approach?
The problem is that if we just trigger the action, it will bubble up and be handled, but the component that triggered it doesn’t have any way of seeing whether it completed successfully or not.
One solution is to add an
editState field to the model, because the model is what drives the list display, so we know its state will be visible to the item’s component:
- When the user hits the “delete” button, mark the model’s
PENDING_DELETEand display a loading indicator in the component.
- If it fails mark the model’s
FAILED_DELETE(and remove the loading indicator when that reaches the component).
- If it succeeds, let the item be removed from the list.
But that seems like we’ve basically implemented “actions down” over the “data down” channel. Is that reasonable?
What we really want to be able to do is send an action from the component, and watch for a promise to be resolved with success or failure. Is there a way to do that now?
Part of the problem is that these parts of the page are not routable, because many items exist on the same page, so as far as I know we can’t use a loading substate. It’s also harder to deliver state to the component, because the Controller and Route are responsible for many items. Much of the built-in niceness of Ember seems to be unavailable for non-routable items.
Any suggestions? We’re especially interested in using an approach that is most compatible with Ember 2.0 and beyond.