Ember: how to implement a tabbed interface maintaining the state of the templates?

The use case is quite common, but I cannot figure out the correct way to do it with Ember: let's say you have a page, split into 3 tabs ('Details', 'Transactions' and 'Activity').

All the data belonging to each tab is quite "UI rich" and heavy to retrieve. The Details page is made of an accordion, and transactions and activity are filterable and sortable tables.

The user starts from Details and opens the third accordion panel. Then clicks on Transaction, the system goes to fetch the first page of rows, the user sorts them by TransactionId and move to page 5. Now he gets back to the Details where they expect to find the third accordion panel open, while if they decide to go back to the transactions, they will find exactly what they left: page 5, sorted by TransactionId (without the system going to fetch the rows).

The obvious approach (three different routes /users/12/details, /users/12/transactions and /users/12/activity), won't obviously work, because the model will be refreshed every time and the template re-rendered completely from scratch: the UI is reset and the system will always have to go back to the server to fetch the data.

An other option is maybe to use the queryParams in the routes to avoid the route transitions, but in this case I don't know exactly how to store the state of the templates and just re-show them, without a full render (or I will lose the UI state).

The final option is to load everything from the very beginning, populating a super fat single template, hiding/showing the tab just switching the DOM elements. Not sure who to load more than one "model" then (user details, transactions and activities are different models).

Ideas?