如何使用 Ember.js 和 Handlebars.js 渲染（Twitter Bootstrap）网格？

我很难找到一种使用 Ember.Handlebars 渲染以下标记的方法：

<div class="row-fluid">
  <div class="span4">Item #1 (row #1 / column #1)</div>
  <div class="span4">Item #2 (row #1 / column #2)</div>
  <div class="span4">Item #3 (row #1 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #4 (row #2 / column #1)</div>
  <div class="span4">Item #5 (row #2 / column #2)</div>
  <div class="span4">Item #6 (row #2 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #7 (row #3 / column #1)</div>
</div>

使用纯 JavaScript，我会做这样的事情：

var array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    output = '<div class="row-fluid">';

for (var i = 0, j = array.length; i < j; i++) {
  output += '<div class="span4">' + i + '</div>';

  if ((i + 1) % 3 == 0) {
    output += '</div><div class="row-fluid">';
  }
}

output += '</div>';

理想情况下，我会将其放入自定义 Handlebars 帮助程序中（从而从模板中删除逻辑），但是Ember 文档仅解释了如何编写简单的帮助程序，我真的不知道如何在不丢失属性绑定的情况下编写更复杂的块帮助程序。

有谁知道使用 Twitter Bootstrap 网格系统和 Ember 模型集合的最佳方法吗？

先感谢您！此致，

David

戴夫你好

尝试使用“无序列表”，而不是使用 rows 和 div 来制作块网格

The HTML

<ul class="row-fluid block-grid-3">
  <li>Item #1 (row #1 / column #1)</li>
  <li>Item #2 (row #1 / column #2)</li>
  <li>Item #3 (row #1 / column #3)</li>
  <li>Item #4 (row #2 / column #1)</li>
  <li>Item #5 (row #2 / column #2)</li>
  <li>Item #6 (row #2 / column #3)</li>
  <li>Item #7 (row #3 / column #1)</li>
</ul>

那么 CSS 就会像这样。

ul.block-grid-3 {
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li {
   width: 33.33333%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li:nth-of-type(3n+1) {
   clear: left;
}

然后，如果您想更改为四个块，您可以将 css 更改为：

ul.block-grid-4 > li {
   width: 25%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}  
ul.block-grid-4 > li:nth-of-type(4n+1) {
   clear: left;
}

jsfiddle 示例更强大的解决方案。

您还可以查看这个 ember 应用程序Open-pos使用这种方法对产品进行布局。

Zurb 的 css 框架“基础”是一个很好的解决方案，称为块网格。这个系统非常容易改变 3 向上网格的其他数字，只需在 css 中做一点小小的改变。你可以加入块网格代码进入你的引导程序 scss。如果您有任何疑问，请告诉我。

Cheers