Ember-bootstrap: composant Navbar se répète 12 fois

Question

J'utilise le code Navbar exemple de ember-bootstrap dans une application simple test de Ember:

{{#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}} 

Cependant, je vais avoir des résultats étranges; la barre de navigation apparaît 12 fois sur ma page. Pour ce que ça vaut, le bouton bascule ne fait rien non plus - mais cela pourrait être lié à la raison pour laquelle la barre de navigation apparaît 12 fois. Voir la capture d'écran suivante:

Voici les étapes de mon travail pour mettre en place ce projet:

1. ember new bootstrap-test
2. intérieur /bootstrap-test:
   1. ember install ember-bootstrap
   2. ember g ember-bootstrap --bootstrap-version=4

Voici le contenu de mon dossier ember-cli-build.js:

/* 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(); 
}; 

Enfin, j'utilise la version ember-cli2.14.2. Toute aide pour comprendre cela serait grandement appréciée. Je vous remercie!

Answer 1

Il peut être provoqué par le réaffichage en raison de la mise à jour des propriétés au niveau de l'accrochage didRender ou didInsertElement. Si c'est le cas, vous aurez certainement une erreur d'assertion dans la console.

Je cherche toujours la première erreur, s'il n'y a plus d'erreurs signalées dans la console. cela m'a beaucoup aidé dans mon développement.