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

Question

我遇到了 ember-bootstrap 插件的問題。 我已經下載並安裝了它，正如他們的設置頁面上提到的那樣，寫在這里： https://www.ember-bootstrap.com/getting-started/setup 。

安裝后，我直接開始使用導航欄 - 但時間不長。 折疊時與導航欄交互的漢堡菜單沒有打開。 我發現 bootstrap.min.js 沒有被導入/加載。 因此，我在索引文件中為為我提供 bootstrap.min.js 的 cdn 做了一個額外的條目。

我現在的問題是，ember-bootstrap 插件是否提供了這個 bootstrap.min.js 並且我犯了一個錯誤，或者這（僅在索引文件中加載 js）已經是最佳實踐了嗎？

Answer 1

ember-bootstrap沒有使用 Bootstrap 的 JavaScript。

相反，它提供了自己的由 Ember 驅動的交互式組件。

導航欄的折疊/展開 state 由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 Navbar 的官方文檔采用了快捷方式，而是執行以下操作：

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

mut是 Ember 的一個老特性，它可以讓你在父模板中實現一個導航欄，而無需在父 JS 文件中編寫任何內容。

PS官方文檔說@collapsed={{true}}這是錯誤的。 如果您使用這樣的 static 值，您將無法更改 state。 文檔背后的演示實際上使用@collapsed={{collapsed}} 。 根據現代 Ember 指南，它應該寫成@collapsed={{this.collapsed}} 。