Bootstrap button group with Ember

If you try the following in an ember template, the button elements get wrapped in the ember metamorph tags which break the bootstrap styling because they use the :first-child css selectors.

<div class="btn-group" data-toggle="buttons-radio">    
   {{#each db in databases}}
      <button class="btn">{{db.name}}</button>
   {{/each}}
</div>

Messed up styling:

You have two options to fix this:

1. Update your css to fix it
2. Use an Ember view so metamorph tags are gone

I don't like the first option because it introduces what amounts to duplicate css rules. The 2nd option is below:

App.MyView = Ember.CollectionView.extend({
  classNames: ['btn-group'],
  itemViewClass: Ember.View.extend({
    template: Ember.Handlebars.compile("{{view.content.name}}"),
    tagName: 'button',
    classNames: ['btn']
  }),
  attributeBindings: ['data-toggle'],
  'data-toggle': 'buttons-radio'

});

In my case I also needed to make sure I bound the collection to the view:

{{view App.MyView contentBinding="databases" }}

Correct Styling: