Handlebars {{each}} alters appearance of Bootstrap btn-group-vertical

Question

I am rendering a Bootstrap 3 btn-group-vertical using EmberJS and the Emblem templating language (which supports Handlebars helpers). The following two ways of rendering the same btn-group-vertical produce different results (see image below). One has square corners and the other has rounded corners. Using the element inspector reveals that Ember is inserting script tags when each is used. The label elements are identical though. Why does this cause a difference in the corners?

Without {{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

With {{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

I just ran into this issue as well. The script tags inserted by Handlebars (and supposedly also Emblem) interfere with the CSS styling rules that Bootstrap uses to recognize contiguous elements.

The first and last children of a button group are styled with top or bottom round borders respectively. But the inserted script tags take the first and last positions.

The upcoming HTMLBars should solve this.