twitter-bootstrap - 如何使用 Ember.js 和 Handlebars.js 渲染(Twitter Bootstrap)网格？

Question

我很难找到一种使用 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 documentation只解释了如何编写简单的助手，我真的不知道如何编写更复杂的 block 助手而不丢失属性绑定(bind)。

有谁知道将 Twitter Bootstrap 的网格系统与一组 Ember 模型一起使用的最佳方式？

先感谢您!此致，

大卫

Answer 1

戴夫

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

的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;
}

然后，如果您想更改为四个 block ，可以将 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 example更强大的解决方案。

您还可以查看此 ember 应用程序 Open-pos产品是使用这种方法布局的。

Zurb 的 css 框架“基础”作为出色的解决方案，称为 block-grid .这个系统非常容易改变 3 up grid 的其他数字，只需在 css 中进行少量更改。您可以加入 block grid code进入你的 Bootstrap scss。如果您有任何问题，请告诉我。

干杯