I don’t think I was clear in my original problem statement. Let me try again:
AFAIK, templates + routing work like this: when entering a route, HTML elements for the associated template are generated and appended to the DOM (-> render).
When transitioning to a different route, the original route’s elements are removed from the DOM and new nodes resulting from the template from the new route are inserted into the DOM.
This means that when you go back to the first route, it’s associated DOM nodes are re-generated.
But this is not what I want. Instead, if a route caused elements to be generated + inserted into the DOM, I do not want that to happen again when I go back to that route, but rather simply show the elements that were previously generated.
Here is a simple example that illustrates the problem.
I have a template like this:
<script type="text/x-handlebars" id="debugger">
<iframe id="debuggerFrame" src="http://localhost:8085">
And this route:
Every time I go to the route, the iframe is reloaded. But for various reasons this should not happen.
So what I’m really after is this:
- first time in route, create elements and append to DOM
- when navigate to another route, hide instead of remove elements of previous route
- going back to original route: show its nodes, don’t recreate.
Is there a recommended way to do this in Ember?