Bootstrap 在 Ember 已经在重新渲染时切换按钮后重新切换按钮

Question

我有一个如下定义的按钮。

<button type="button"
  class="btn btn-primary-outline {{if shouldBeActive "active"}}"
  data-toggle="button"
  {{action "makeActive"}}>MyButton</button>

makeActive 动作切换 shouldBeActive 属性，这会导致按钮在 ember 时获得或失去 .active class重新呈现模板。

一切都很棒...除了 bootstrap.js 单击处理程序切换按钮的 .active class 然后在 Ember 更新了 DOM，导致按钮切换到不正确的切换状态。

有 eloquent 解决这个问题的方法吗？我唯一的想法是我可以做一些愚蠢的事情，比如...

<button type="button"
  class="btn btn-primary-outline {{if (xor shouldBeActive isFirstRender) "active"}}"
  data-toggle="button"
  {{action "makeActive"}}>MyButton</button>

...有效地将活动状态设置为与预期相反的状态，并让 bootstrap 将其切换到适当的状态。

Answer 1

似乎 Bootstrap 单击处理程序只有在您保留 data-toggle="button" 时才会触发，因此删除它应该会导致 Ember 处理程序仅触发。