Handlebars {{each}} 改变 Bootstrap btn-group-vertical 的外观答案

【问题标题】：Handlebars {{each}} alters appearance of Bootstrap btn-group-verticalHandlebars {{each}} 改变 Bootstrap btn-group-vertical 的外观
【发布时间】：2014-03-24 09:19:02
【问题描述】：

我正在使用 EmberJS 和 Emblem 模板语言（支持 Handlebars 助手）渲染 Bootstrap 3 btn-group-vertical。以下两种渲染相同btn-group-vertical 的方法会产生不同的结果（见下图）。一个有方角，另一个有圆角。使用元素检查器显示当使用 each 时，Ember 正在插入脚本标签。 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}),
],

【问题讨论】：

检查输出的HTML，有什么不同？这将提供线索。
@JulianH.Lam 谢谢朱利安。有关输出 HTML，请参阅我编辑的帖子。这是不同的，但我不知道 Ember 插入的脚本“占位符”如何改变按钮的角样式。

标签： twitter-bootstrap twitter-bootstrap-3 handlebars.js emblem.js

【解决方案1】：

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

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

即将推出的HTMLBars 应该可以解决这个问题。

【讨论】：