1

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

安装后，我直接开始使用导航栏 - 但时间不长。折叠时与导航栏交互的汉堡菜单没有打开。我发现 bootstrap.min.js 没有被导入/加载。因此，我在索引文件中为为我提供 bootstrap.min.js 的 cdn 做了一个额外的条目。

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

4

1 回答 1

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;
  }
}

Navbar的官方文档采用了ember-bootstrap一条捷径，而是执行以下操作：

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

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

PS官方文档说@collapsed={{true}}哪个是错的。如果您使用这样的静态值，您将无法更改状态。文档背后的演示实际上使用 @collapsed={{collapsed}}. 根据现代 Ember 指南，它应该写为@collapsed={{this.collapsed}}.

于 2020-07-23T09:25:07.973 回答