Ember Route transition, prevent templates destroy.

Question

This is what i have in my app.js. Index route with flights & cars as nested routes.

this.resource('index',{ path: '/' }, function(){
    this.route('flights');
    this.route('cars');
});

application.hbs

<div class="main">
    {{outlet}}
</div>

index.hbs

..some html here...
{{outlet}}
..some html...

cars.hbs

{{#some-component1}}
{{/some-component1}}

flights.hbs

{{#some-component2}}
{{/some-component2}}

Cars and flights are kind off tabs(links), when clicked i use link-to to load the corresponding route domain/app/#/flights
loads flights hbs in index.hbs outlet which in turn is loaded in application.hbs outlet. When user clicks cars url changes to
domain/app/#/cars and it loads cars.hbs in index.hbs outlet.

But when this transition happens the flights rendered template is destroyed along with all the components it had and corresponding component class objects and cars template and all its components are rendered. Which is all fine.

Now when user moves back(click on flights link) to flights all the flights components/templates are re created and rendered.

The content of these tabs are expensive to create every time when user moves between tabs(kind off).

Question: Should it be implemented just as a tab panel and not change the url(not use link-to, just actions) when user clicks on these links and showing/hiding content? OR

should it be done the URL way? If yes, is there a way to make ember not destroy the previously rendered template in the outlet?

Thanks

Mateusz Nowak Mateusz Nowak · Accepted Answer · 2014-11-14T21:00:10

At this time you can not keep your views/components rendered when route change. You can only render it beforehand and then switch between using ember query params. Take a look at http://emberjs.com/guides/routing/query-params/ and https://github.com/instructure/ic-tabs

Ember Route transition, prevent templates destroy.

1 Answers