Ember标记打破了bootstrap CSS

Question

我正在使用模板生成一个按钮组：

<div class="btn-group">
    {{#if allowNew}}
        {{#link-to newRoute type="button" class="btn btn-primary"}}<i class="fa fa-plus"></i> {{t generic.add}} {{capitalize singularHuman}}{{/link-to}}
    {{/if}}
    {{#if allowDeleteAll}}
        <button type="button" {{action "destroyAllRecords"}} class="btn btn-danger"><i class="fa fa-trash-o fa-lg"></i> {{t generic.delete_all}} {{capitalize pluralHuman}}</button>
    {{/if}}
</div>

Ember将<script>个节点放在按钮组中，我想要处理绑定，查看更新等等。

问题在于bootstrap依赖于CSS规则，如

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle)

微调样式。由于<script>标记位于第一个<button>或<a>标记之前，并且位于最后一个标记之后，因此这些CSS规则将应用于不应该的位置，而不是像这样：

我得到这样的东西：

正如您所看到的，股票引导样式的第一个和最后一个按钮（外部角）有圆角，但我的实现没有这样的圆角。

有可能以某种方式克服这个问题吗？

Answer 1

使用余烬视图。见https://coderwall.com/p/f1npbg

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'

});