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

Question

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

安装完成后，我已经直接开始使用导航栏了--但用的时间不长。在折叠时与浏览器导航栏交互的Hamburgermenu没有打开。我发现bootstrap.min.js没有导入/加载。因此，我在索引文件中为为我提供bootstrap.min.js的cdn创建了一个额外的条目。

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

Answer 1

ember-bootstrap没有使用Bootstrap的JavaScript。

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

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

<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}}，这是错误的。如果您使用这样的静态值，您将无法更改状态。documentation actually uses @collapsed={{collapsed}}背后的演示。根据现代Ember的指导方针，它应该写成@collapsed={{this.collapsed}}。