使用 bootstrap 和 ember 3.8

Question

我们从一个新的应用程序开始，使用 Ember 3.8 和 bootstrap/SASS。似乎有两个可用的加载项支持 Ember、ember-boostrap and ember-cli-bootrap-sassy 中的 bootstrap。

虽然前者为大多数 bootstrap 功能实现了 ember 组件，并且还 "replaces" 原始 bootstrap.js 由它自己的实现实现，但后者似乎我仍然可以使用所有原始组件和 js 实现。

乍一看，我会更喜欢 ember-cli-bootrap-sassy，因为我仍然可以使用来自网络的所有 bootstrap 示例，并且有一个 "customized" 版本的 bootstrap.js 对我来说似乎也有些违反直觉。另外，所有 bootstrap 功能 ember-bootstrap 都没有实现，但我仍然需要怎么办？看起来我可能会以一个使用 ember-bootstrap 的应用程序结束，但另外使用各种 "workarounds" 来处理未实现的事情。

由于我在这个领域没有太多经验，我很乐意得到专家的一些建议和见解。

Answer 1

所以首先免责声明：作为ember-bootstrap的作者，我在这里肯定有点偏见！ ;)

但我认为我有充分的理由支持 ember-bootstrap，否则我不会投入那么多工作。所以最主要的是它遵循 Ember 的编程模型，而直接使用 bootstrap.js 不会，而且在 Ember 应用程序中经常会感到尴尬：

您使用组件来渲染事物，进而渲染 Bootstrap 期望的琐碎标记，而不是在整个应用程序中传播 Bootstrap 风格的静态标记
ember-bootstrap 中的组件严格遵循 Ember
这意味着通过声明性地分配创建数据绑定的属性，您的应用程序的状态 "flows" 通过您的 UI，因此呈现的 DOM 是您的状态的直接函数。这是 "Data down" 部分，它不同于必须执行 "call" 才能达到相同效果（如 $('#myModal').modal('show')）
当用户与您的 UI 交互时，将调用操作，这些操作在组件树的某处处理（例如在控制器中）。这些转换你的状态，用于再次更新UI（单向数据流）

如果这听起来太抽象，请看这个模态组件的简单示例。在 ember-bootstrap 你会做这样的事情：

{{#bs-modal-simple
  open=this.showConfirmation
  title="Please confirm"
  onSubmit=(action "submit")
  onHidden=(action "close")
}}
  Some {{dynamic}} content.
{{/bs-modal-simple}}

必要的 Bootstrap 标记会自动呈现。您只需使用该组件并与其交互 public API（属性和操作）
显示模式将通过将您的 showConfirmation 状态设置为 true（或者甚至使用计算的属性自动计算）来实现。在 bootstrap.js 中，您将不得不以某种方式强制调用 $('#myModal').modal('show')
当用户发起的事件发生时，分配的动作会自动在您的父级（组件或控制器）上调用。使用 bootstrap.js 时，您必须先在 JavaScript 中附加事件侦听器（然后再删除它们！）： $('#myModal').on('hidden.bs.modal', function (e) { // do something })。
这也需要手动记账，而组件有其生命周期挂钩，因此您可以随时处理它们（比如将它们放在 {{#if ...}} 块中或更改路由）。

以上是我的主要观点，但还有几点：

ember-bootstrap 与 Ember 的测试层配合得很好。使用 bootstrap.js 你会在某些时候运行遇到问题，例如代码使用 setTimeout() 调用来处理转换，Ember 的测试助手不知道，所以不要等待。但是通常你必须依赖于你的应用程序在 "settled state" 中的测试。 ember-bootstrap 而不是集成到 Ember 所谓的运行循环，所以 await click('#show-modal-button') 之类的东西就可以正常工作（即，当 Promise 解析时，模式将完全可见）。
bootstrap.js 需要 jQuery，而 ember-bootstrap 不需要。

再补充一件事：以上所有内容都适用于 Bootstrap 需要 JavaScript 的组件。对于像徽章这样的静态组件，您可以编写适当的 Bootstrap 风格标记。事实上 ember-bootstrap 有意不为这些琐碎的 Bootstrap 组件提供组件，以免增加任何无用的开销。

Answer 2

要澄清 Simon 的一点，Ember Bootstrap 实际上并没有使用任何基础 bootstrap.js javascript 来工作，所以你会输那种依赖。并且由于 bootstrap（至少 4.0）需要 jQuery，您与两者都有联系。

使用 Ember-Bootstrap 需要 0 个额外的 jquery 才能工作（并且在我的 jQuery 免费应用程序上工作）。

使用 bootstrap 和 ember 3.8

using bootstrap with ember 3.8

twitter-bootstrap

ember.js

ember-cli

ember-bootstrap