In nested routing when i link from child route to parent route the parent route model is not loading

Questions Routing
1

Hi, I’m newbie to ember when I call the parent route using <LinkTo> The model of that route is not loading but when I call the neighbor route of that child route the model is loading, What should i do to load the parent routs model

2

Hi Sriakran, could you share more details about the route hierarchy and what you want to happen? It’s a little difficult to diagnose without a bit more context.

One thing to note though, is that a parent route model is only going to load when it is first visited, it doesn’t reload anytime you change child routes. For example, if you visit:

/parent/child1   // parent model hook will load, child1 model hook will load
/parent/child2.  // parent model hook will not reload, child2 model hook will load
/parent          // parent model hook will not reload
/other-route     // outside of parent route, other-route model will load
/parent/child2   // parent model hook will load, child2 model hook will load
1 Like
3

@dknutsen thanks for the time, by the way I found the solution here.

4

Hi, i’m facing the same can you help me out?how did you fixed that. i want to hide the current parent route when switching to child route of nested routes?

Router.map(function () {
    this.route('workspace', { path: '/ws/:workspace_id' }, function () {
    
        this.route('files'); 
      
  });
});

during workspace/ws/ route the list of task will b e listed, after clicking any of task, it should be redirected to files route

5

Hi @Aarthi! The important thing to remember is that nested routes mean nested UI.

If I’m understanding what you want correctly then you have two options:

1. use nested routes, but put the “workspace” template in the workspace index template instead

This would look like this:

Router.map(function () {
  this.route('workspace', { path: '/ws/:workspace_id' }, function () {
    // this.route('index'); <-- this route is implicitly created already
    this.route('files'); 
  });
});

// app/templates/workspace.hbs 
     ^ this template should basically just be an "{{outlet}}"
       because this is rendered for `/ws/:id` and ANY sub-route

// app/templates/workspace/index.hbs
     ^ this template should have the list of tasks
       this is what you will see when you visit just `/ws/:id`

// app/templates/workspace/files.hbs
     ^ this stays how it is
       when you visit `/ws/:id/files` you will no longer see the `index` template

2. don’t use nested routes, allow files to be an independent route

The other option is to just treat files as an independent route. Something like this:

Router.map(function () {
  this.route('workspace', { path: '/ws/:workspace_id' });
  this.route('files', { path: '/ws/:workspace_id/files' }); 
});

I personally like option 1 better.