twitter-bootstrap – 如何使用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 documentation只解释了如何编写简单的帮助器,我真的不知道如何编写更复杂的块帮助程序而不会丢失属性绑定.

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

先感谢您！最好的祝福,

大卫

解决方法

G’day戴夫

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

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 example更强大的解决方案.

您还可以使用此方法查看此ember应用程序Open-pos产品是否布局.

Zurb的css框架“基础”作为一个很好的解决方案叫做block-grid.这个系统很容易改变3 up网格其他数字只需要在css中稍作改动.你可以将block grid code放入你的bootstrap scss中.如果您有任何问题,请告诉我.

干杯