glut-Bootstrap: Navbar Komponente wiederholt sich 12 mal

Question

Ich verwende ember-bootstrap ‚s Navbar Beispielcode in einem einfachen 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}} 

Jedoch habe ich seltsame Ergebnisse, die ich; Die Navbar erscheint 12 Mal auf meiner Seite. Für das, was es wert ist, macht die Umschalttaste auch nichts - aber das könnte mit dem Grund zusammenhängen, warum die Navbar 12 Mal erscheint. Sehen Sie im folgenden Screenshot:

Hier sind die Schritte, die ich nahm dieses Projekt einzurichten:

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

Hier ist der Inhalt meiner ember-cli-build.js Datei:

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

Schließlich verwende ich ember-cli Version 2.14.2. Jede Hilfe, um dies herauszufinden, würde sehr geschätzt werden. Vielen Dank!

Answer 1

Dies kann durch erneutes Rendering aufgrund der Aktualisierung der Eigenschaften in didRender oder didInsertElement Hook verursacht werden. Wenn das der Fall ist, dann werden Sie sicherlich Assertionsfehler in der Konsole bekommen.

Ich suche immer nach dem ersten Fehler, wenn mehr keine Fehler in der Konsole gemeldet werden. Das hat mir in meiner Entwicklung sehr geholfen.