Get an ember component to maintain state across route transitions

Question

In ember controller they maintain state accross transitions as they are singletons, is it possible to do the same thing with a component?

I need this as in my ember app the user navigates around across routes but components in the respective route get initialised to their initial state, I don't want this to happen in this case.

can you elaborate your use case? May be you can store last state in controller — Sushant, Mar 18 '15 at 15:38
Use a service, as described in: https://stackoverflow.com/questions/32620550/where-to-store-transient-ui-state-in-ember-2-0 — Jon, Oct 02 '15 at 09:40
Possible duplicate of [Where to store transient UI state in Ember 2.0](https://stackoverflow.com/questions/32620550/where-to-store-transient-ui-state-in-ember-2-0) — Liam, Mar 26 '18 at 15:24

score 1 · Answer 1 · answered Mar 18 '15 at 16:33

1

We need more context for this question, but the probable answer is that your component needs to be in a parent template that doesn't transition when you navigate to different routes. So in application.hbs you would have:

{{your-persistent-component}}
{{outlet}} <!-- Outlet your sub-routes are rendered into -->

Depending on your needs, you may need to nest this into a resource, for instance if you didn't want the component to show on a login page, but did want it to show for a logged-in user's index page.

answered Mar 18 '15 at 16:33

mpowered

13,162
2
15
18

What do you mean by nest this into a resource? – Nikos Mar 19 '15 at 11:28
Check out the documentation on resources--my point is that often in ember we use a resource like `this.resource('user', { path: '/' }, function() { // more routes and resources` to hold the model/state of a logged in user. But you didn't really elaborate so I can't tell what your use case is. – mpowered Mar 19 '15 at 20:53
Well I have a component in a route, and that route only, that must maintain its state when I navigate out and back to its parent route. – Nikos Mar 19 '15 at 23:14

score 1 · Accepted Answer · answered Mar 19 '15 at 11:29

I found that for my use case I need to bind specific fields in the component to either in the controller or the model. It seems components are set to a initial state on each transition.

eg:

 {{foo-comp  fooCompProp1=fooControllerProp1   fooCompProp2=fooModelProp1 }}

Get an ember component to maintain state across route transitions

2 Answers2