如何在 ember-bootstrap 插件中加载 bootstrap.min.js

Question

我遇到了 ember-bootstrap 插件的问题。我已经下载并安装了它，正如他们的设置页面上提到的那样，写在这里：https://www.ember-bootstrap.com/getting-started/setup.

设置完成后，我直接开始使用导航栏 - 但时间不长。折叠时与导航栏交互的汉堡包菜单未打开。我发现 bootstrap.min.js 不是 imported/loaded。因此，我在索引文件中为提供 bootstrap.min.js 的 cdn 创建了一个额外条目。

我现在的问题是，ember-bootstrap 插件是否提供了这个 bootstrap.min.js 而我弄错了或者是这个（只在索引文件中加载 js） ) 已经是最佳实践了吗？

Answer 1

ember-bootstrap 没有使用 Bootstrap 的 JavaScript.

相反，它提供由 Ember 驱动的自己的交互式组件。

导航栏的 collapsed/expanded 状态由 collapsed 参数控制。这是从父组件传递到 Navbar 的外部值，如下所示：

<BsNavbar
  @collapsed={{this.isNavbarCollapsed}}
>

单击汉堡菜单时，导航栏会触发 onCollapse 或 onExpand 操作。这些操作也应由父模板提供：

<BsNavbar
  @collapsed={{this.isNavbarCollapsed}}
  @onCollapse={{fn this.setNavbarCollapsed true}}
  @onExpand={{fn this.setNavbarCollapsed false}}
>

class ParentComponent extends Component {
  @tracked isNavbarCollapsed = false;

  @action setNavbarCollapsed(state) {
    this.isNavbarCollapsed = state;
  }
}

ember-bootstrap 导航栏的 official documentation 使用快捷方式并改为执行如下操作：

<BsNavbar
  @collapsed={{this.isNavbarCollapsed}}
  @onCollapse={{action (mut collapsed) true}}
  @onExpand={{action (mut collapsed) false}}
>

mut是Ember的一个老特性，它让你在父模板中实现一个导航栏，而无需在父JS文件中编写任何内容。

PS 官方文档说 @collapsed={{true}} 这是错误的。如果您使用这样的静态值，您将无法更改状态。文档背后的演示 actually uses @collapsed={{collapsed}}。根据现代Ember准则，应该写成@collapsed={{this.collapsed}}.

如何在 ember-bootstrap 插件中加载 bootstrap.min.js

How to load bootstrap.min.js in ember-bootstrap plugin

javascript

bootstrap-4

ember-bootstrap