在ember 3.8中使用bootstrap

Question

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

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

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

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

Answer 1

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

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

• 您使用组件来渲染事物，从而渲染Bootstrap期望的琐碎标记，而不是在整个应用程序中散布Bootstrap风味的静态标记
• 组件ember-bootstrap严格遵循Ember中所谓的“数据减少操作”（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的所谓的“运行循环”中，这样​​的事情await click('#show-modal-button')就可以正常工作（即，当Promise解决时，该模式将是完全可见的）。
• bootstrap.js需要jQuery，而不需要ember-bootstrap。

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