Question

我们从一个新的应用程序开始，使用Ember 3.8和bootstrap / SASS。似乎有两个可用插件在Ember中支持引导程序，ember-boostrap和ember-cli-bootrap-sassy。

虽然前者为大多数bootstrap功能实现了ember组件，并通过其自己的实现“替换”了原始的bootstrap.js，但对于后者，看来我仍然可以使用所有原始的组件和js实现。

乍一看，我对ember-cli-bootrap-sassy更加满意，因为我仍然可以使用网络上的所有引导示例，并且拥有“定制”版本的bootstrap.js似乎与我。另外，ember-bootstrap的所有引导功能都没有实现，但是我仍然需要？看来我可能会以使用ember-bootstrap的应用程序结尾，但是对于未实现的事情还使用了各种“变通方法”。

由于我在该领域没有太多经验，所以很高兴获得专家的一些建议和见解。

Answer 1

因此，首先免责声明：作为ember-bootstrap的作者，我在这里肯定有点偏颇！ ;）

但是我认为我有强烈的理由赞成ember-bootstrap，否则我将不会投入大量的工作。因此，主要的一点是它遵循Ember的编程模型，而直接使用bootstrap.js却并非如此，并且在Ember应用程序中常常会感到尴尬：

您使用组件来渲染事物，从而渲染Bootstrap期望的琐碎标记，而不是在整个应用程序中散布Bootstrap风味的静态标记
ember-bootstrap中的组件严格遵循Ember中所谓的“ Data down Actions up”（DDAU）编程模型
这意味着通过声明性地分配创建数据绑定的属性，您的应用程序状态将“通过” UI，因此呈现的DOM是状态的直接函数。这是“数据丢失”部分，与必须强制性地“调用”事物以达到相同效果（例如$('#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标记会自动呈现。您只需使用该组件并与其公共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的测试助手不知道的，因此不必等待。但是通常您必须依靠测试来确定您的应用处于“稳定状态”。 ember-bootstrap而是集成到Ember的所谓Run中循环，所以await click('#show-modal-button')之类的东西就可以工作（即，当Promise解析时，该模式将是完全可见的）。
bootstrap.js需要jQuery，而ember-bootstrap则不需要。

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

Answer 2

为了阐明Simon的观点，Ember Bootstrap实际上并未使用任何底层bootstrap.js javascript来工作，因此您失去了这种依赖性。并且由于引导程序（至少为4.0）需要jQuery，因此您将两者捆绑在一起。

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

在ember 3.8中使用bootstrap

2 个答案: