Refreshing parent route when navigating to nested route, need help

1

Hi all. Very new to Ember so apologies for the newbie question.

I have a problem with Ember not updating the template when navigating through nested routes.

First, to describe how my application looks and is structured In my application.hbs, I have a template which has the name of office locations running across the top of the page in a horizontal navigation bar. There is then an outlet below this. Relevant section of application.hbs:

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">

            {{#link-to "offices" "london" tagName="li" href=false}}
                {{#link-to 'institutions' 'london' bubbles=false}}London{{/link-to}}
            {{/link-to}}

            {{#link-to "institutions" "manchester" tagName="li" href=false}}
              {{#link-to 'institutions' 'manchester' bubbles=false}}Manchester{{/link-to}}
            {{/link-to}}
          </ul>
</div>
    <div class="container-fluid">
      {{ outlet }}
    </div>

The offices.hbs template contains a subnav to the left of the page, with links to various pages about that office, and an outlet to the right:

<div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            {{#link-to "offices.index" this tagName="li" href=false}}
                {{#link-to 'offices.index' this }}Overview{{/link-to}}
            {{/link-to}}
            
            {{#link-to "offices.finances" this tagName="li" href=false}}
                {{#link-to 'offices.finances' this }}Finances{{/link-to}}
            {{/link-to}}  

            {{#link-to "offices.staff" this tagName="li" href=false}}
                {{#link-to 'offices.staff' this }}Staff{{/link-to}}
            {{/link-to}}  

          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            {{outlet}}

        </div>
</div>

And finally, the subpages, such as offices.finances

<h1 class="page-header">Finances</h1>
etc...

I have the following routes defined:

Router.map(function() {
    this.route('offices', { path: '/offices/:office_name'}, function() {
        this.route('index');
        this.route('finances');
        this.route('staff');
    });
});

If I navigate to http://localhost:4200/offices/london/finances, everything works fine. However, if I click the top navigation bar and choose ‘manchester’, the URL correctly changes to http://localhost:4200/offices/manchester/index but the subnav on the left of the page does not update. All the links remain to the London office. However, if I type this address into the browser URL bar it correctly loads the Manchester office links.

What am I doing wrong? I am sure this must be something fairly simple! Thanks in advance for any help you can give to a beginner!

2

Hey! It’s not totally clear to me why this might be happening. Though, the first thing I’d be inclined to try…remove the this in the offices.hbs template.

So…this link-to :

{{#link-to "offices.index" this tagName="li" href=false}}
  {{#link-to 'offices.index' this }}Overview{{/link-to}}
{{/link-to}}

would just become

{{#link-to "offices.index" tagName="li" href=false}}
  {{#link-to 'offices.index' this }}Overview{{/link-to}}
{{/link-to}}

The this in that context is really ambiguous (it’s referring to the controller, I believe)…but I’m guessing that you’re intending for it to refer to the model? I’m not really sure…but something about that seems not quite right and might be what’s contributing to this weirdness!

If that does not resolve it, it might be helpful to get a better sense of what the model hooks for the index/finances/staff routes look like. Just on a hunch, I’m guessing you want your model hook for those to be

model() {
  return this.modelFor('offices');
}

Is that right? Hope this helps!

3

Spencer, thanks so much. Removing the ‘this’ sorted the problem and now it works perfectly. I’d been chasing down loads of avenues and it turns out it was this simple fix, but I’d have never have found that myself. Thanks so much for your help!

4

No problem. Sometimes it just takes a second set of eyes. Glad it worked!