ember-bootstrap: Navbar 组件重复自身 12 次

Question

我在一个简单的 Ember 测试应用程序中使用 ember-bootstrap 的导航栏示例代码：

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

但是我得到了奇怪的结果；导航栏在我的页面中出现了 12 次。就其价值而言，切换按钮也没有任何作用——但这可能与导航栏出现 12 次的原因有关。请参阅以下屏幕截图：

以下是我设置此项目所采取的步骤：

ember new bootstrap-test
内部/bootstrap-test：
1. ember install ember-bootstrap
2. ember g ember-bootstrap --bootstrap-version=4

这是我的 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();
};

最后，我使用 ember-cli 版本 2.14.2。任何帮助解决这个问题的帮助将不胜感激。谢谢！

Answer 1

这可能是由于属性在 didRender 或 didInsertElement 挂钩中更新而重新渲染造成的。如果是这种情况，那么您肯定会在控制台中收到断言错误。

我总是寻找第一个错误，如果控制台中没有报告任何错误。这对我的发展帮助很大。

ember-bootstrap: Navbar 组件重复自身 12 次

ember-bootstrap: Navbar component repeats itself 12 times

ember.js

ember-bootstrap