把手{{each}}改变了Bootstrap btn-group-vertical的外观

Question

我使用EmberJS和Emblem模板语言（支持Handlebars助手）渲染Bootstrap 3 btn-group-vertical。以下两种渲染相同btn-group-vertical的方法会产生不同的结果（请参见下图）。一个有方角，另一个有圆角。使用元素检查器显示Ember在使用each时插入脚本标记。 label元素虽然相同。为什么这会导致角落的差异？

没有{{each}}

h4 Direction
.btn-group-vertical data-toggle="buttons"
  label.btn.btn-primary
    input type="checkbox" left
  label.btn.btn-primary
    input type="checkbox" right

使用{{each}}

h4 Direction
.btn-group-vertical data-toggle="buttons"
  each dir in directions
    label.btn.btn-primary
      input type="checkbox"
        = dir.name

... directions is defined like this in the controller

directions: [
  Ember.Object.create({name: 'left', visible: true}),
  Ember.Object.create({name: 'right', visible: false}),
],

---

Answer 1

我也遇到了这个问题。 Handlebars（以及所谓的Emblem）插入的脚本标签会干扰Bootstrap用于识别连续元素的CSS样式规则。

按钮组的第一个和最后一个子项分别使用顶部或底部圆形边框设置样式。但是插入的脚本标记占据了第一个和最后一个位置。

即将到来的HTMLBars应解决此问题。