Can't get navigation to work

1

Hi!

I’m struggling with how to approach creating a dynamic navigational menu.

Based on user permissions, only specific routes are made available to users. The data for the navigational menu will be handled by an API, but presently, I’ve just hard-coded an array in the app.js file with a child array for subItems. See the code below.

//app.js

import Ember from 'ember';

let navItems = [{
title: 'Dashboard',
url: 'app.dashboard',
subItems: [
    {
      title: 'Overview',
      url: 'app.dashboard.overview'
    }, {
      title: 'Title',
      url: 'app.dashboard.overview'
    }
  ]
}, {
  title: 'Conversations',
  url: 'app.conversations'
}, {
  title: 'Analytics',
  url: 'app.analytics',
  subItems: [
    {
      title: 'Overview',
      url: 'app.dashboard.overview'
    }, {
      title: 'Title',
      url: 'app.dashboard.overview'
    }
  ]
}];

export default Ember.Route.extend({
  model() {
    return navItems;
  }
});

I’ve added the model objects to the app.hbs file below. The parent navItems render, but none of the child navItems.subItems work. I get no errors.

<nav id="menu">
  <ul>
    {{#each model as |navItems|}}
    <li>
      <span>{{navItems.title}}</span>
      {{#if navItems.subItems}}
        <ul>
          {{#each model as |navItems|}}
          <li>
            {{#link-to navItems.subItems.url}}
              {{navItems.subItems.title}}
            {{/link-to}}
          </li>
          {{/each}}
        </ul>
      {{/if}}
    </li>
    {{/each}}
  </ul>
</nav>

I don’t know if I’ve formatted the model data or have configured app.js incorrectly. Any feedback would be greatly appreciated. Thanks :smiley:

2

Looks like your second each is the problem. Should be looping over navItem.subItems instead of over navItems again …

If that was just a copy / paste mistake, it might be worth putting up on Ember Twiddle so that folks can oook at your code more easily …

3

I’ve created an Ember Twiddle, here.

My reasoning for having an each statement within the initial statement is that if a sub-item/s exists, they each will be rendered within the parent item. I’m not sure if I’m explaining my concept too well. I’ve attached a quick mockup below.

586×1162 39.2 KB

Do you think perhaps it’s my use of an array within a parent array in the data?

4

@danielwalton No, you had it all quite nicely, you’d just missed a couple of lines. Take a look at what I adjusted here: Ember Twiddle

The below was the main difference. You were really close :wink:

          {{#each navItems.subItems as |subitem|}}
1 Like
5

@acorncom Thank you so much! :smiley: