问题
I want to make a modal view that can be accessible by its own route.
The problem is — I want to show this view on top of other state/view/route of my app that have big data computed inside.
I thought that i can do it with nested routes. If we run transition to child route, nothing will be recalculated, just child show - very good.
But on practice, when I tried to add child routes for some my resources. I meet the problem described in this question. So, nested routes is not a solution for it.
What is solution? Any ideas?
回答1:
If it must be in its own route, a more appropriate approach would be to have a separate route that you pass a 'previous route' context to in order to avoid having route serialization conflicts. If you are open to not having a separate route, you can just render a 'modal' view in a new outlet and not carry the overhead of passing in a context 'breadcrumb' into a modal route.
回答2:
My solution is here. (the fact is it's nested routes with some cheats)
1) modal goes to 'modal' outlet
2) we have routes for modal with different names, but with the same paths parts.
this.resource('category', { path: '/category/:category_id' }, function () {
/* Different names for the same modal route */
this.resource('modal1', { path: 'card/:card_id' });
});
// url - semantic/books/card/id99
this.resource('semantic', { path: '/semantic/:semantic_id' }, function () {
/* Different names for the same modal route */
this.resource('modal2', { path: 'card/:card_id' });
});
3) when perform transitionTo we have to pass context for parent route
var curPath = this.controllerFor("application").currentPath;
if (/^category/g.test(curPath))
this.transitionToRoute('modal1', { category_id: cat_id, card_id: card_id ) });
else if (/^semantic/g.test(curPath))
this.transitionToRoute('modal2', { semantic_id: sem_id, card_id: card_id ) });
来源:https://stackoverflow.com/questions/19087728/ember-making-modal-view-that-has-its-own-route