ember-bootstrap: Navbar component repeats itself 12 times

Question

I am using ember-bootstrap's Navbar example code in a simple Ember test app:

{{#bs-navbar as |navbar|}}
  <div class="navbar-header">
    {{navbar.toggle}}
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  {{#navbar.content}}
    {{#navbar.nav as |nav|}}
      {{#nav.item}}
        {{#nav.link-to "home"}}Home{{/nav.link-to}}
      {{/nav.item}}
      {{#nav.item}}
        {{#nav.link-to "navbars"}}Navbars{{/nav.link-to}}
      {{/nav.item}}
    {{/navbar.nav}}
  {{/navbar.content}}
{{/bs-navbar}}

However I'm having strange results; the navbar is showing up 12 times in my page. For what it's worth, the toggle button doesn't do anything either - but that might be connected to the reason the navbar appears 12 times. See the following screenshot:

Here are the steps I took to set up this project:

ember new bootstrap-test
Inside /bootstrap-test:
1. ember install ember-bootstrap
2. ember g ember-bootstrap --bootstrap-version=4

Here is the contents of my ember-cli-build.js file:

/* eslint-env node */
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-bootstrap': {
      'bootstrapVersion': 4,
      'importBootstrapFont': false,
      'importBootstrapCSS': false
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

Finally, I'm using ember-cli version 2.14.2. Any help to figure this out would be greatly appreciated. Thank you!

It might be caused by re-rendering due to property update in didRender or didInsertElement hook. If that's the case then you surely you will get assertion error in console. — Ember Freak, Aug 20 '17 at 18:04
Man do I feel silly. You're right. The links point to routes that don't exist in my project. Correcting those issues caused the navbar to render only once. Move your comment into an answer and I'll mark it as accepted. — Argus9, Aug 20 '17 at 18:34

score 1 · Accepted Answer · answered Aug 20 '17 at 18:37

It might be caused by re-rendering due to property update in didRender or didInsertElement hook. If that's the case then you surely you will get assertion error in console.

I always look for the first error, if there is more no of errors reported in the console. that helped me a lot in my development.

ember-bootstrap: Navbar component repeats itself 12 times

1 Answers1