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

Question

I'm facing an issue with the ember-bootstrap plugin. I've downloaded and installed it, as it is mentioned on their setup page, written here: https://www.ember-bootstrap.com/getting-started/setup.

After the Setup, I have directly started with the Navbar - but not for long. The Hamburgermenu, to interact with the Navbar when collapsed didn't open. I found out that the bootstrap.min.js wasn't imported/loaded. Therefore, I've made an extra entry for the cdn that provides me the bootstrap.min.js, in the index file.

My Question is now, does the ember-bootstrap plugin provide this bootstrap.min.js and I've made a mistake or is this (only loading the js in the index file) already best practice?

Answer 1

ember-bootstrap is not using Bootstrap's JavaScript.

Instead, it provides its own interactive components driven by Ember.

The collapsed/expanded state of the Navbar is governed by the collapsed argument. This is an external value that is passed into the Navbar from the parent component like this:

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

When the hamburger menu is clicked, the Navbar triggers the onCollapse or onExpand action. These actions should also be provided by the parent template:

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

The official documentation for ember-bootstrap Navbar takes a shortcut and does something like this instead:

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

mut is an old feature of Ember, it lets you implement a Navbar in the parent template without writing anything in the parent JS file.

PS The official documentation says @collapsed={{true}} which is wrong. If you use a static value like this, you'll not be able to change the state. The demo behind the documentation actually uses @collapsed={{collapsed}}. According to modern Ember guidelines, it should be written as @collapsed={{this.collapsed}}.