5

我很难找到一种使用 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 模型集合一起使用的最佳方式？

先感谢您！最好的祝福，

大卫

4

3 回答 3

4

戴夫

尝试使用“无序列表”而不是使用行和 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 示例是一个更强大的解决方案。

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

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

干杯

于 2013-04-22T21:42:10.410 回答
2

对于那些感兴趣的人，这是处理这种情况的一种非常干净的方法。

这是模板：

{{#each post in posts}}
  {{#if post.first}}
    <div class="row-fluid">
  {{/if}}
    <div class="span4">
      <div class="post">
        {{post.title}}
      </div>
    </div>
  {{#if post.lastOfRow}}
    </div>
    <div class="row-fluid">
  {{/if}}
  {{#if post.last}}
    </div>
  {{/if}}
{{/each}}

以及对应的控制器：

App.PostsController = Ember.ArrayController.extend({
  posts: function () {
    var length = this.get('length');

    return this.map(function (post, i) {
      // Checks if it’s the last post
      if ((i + 1) == length) {
        post.last = true;
      } else {
        post.last = false;

        // Checks if it’s the first post
        if (i == 0) {
          post.first = true;
        } else {
          post.first = false;
        }

        // Checks if it’s the last post of a row
        if ((i + 1) % 3 == 0) {
          post.lastOfRow = true;
        } else {
          post.lastOfRow = false;
        }
      }

      return post;
    });
  }.property('content.@each')
});

<td>这对于生成表（嵌套在）也可能很有用<tr>......即使我最终使用了 kiwiupover 的解决方案！;-)

问候，

D.

于 2013-04-25T11:31:08.663 回答
0

接受的答案效果很好，但如果你有动态的行和跨度将在模型/属性更改posts时重新绘制。posts如果内容很小，这可能没问题，但在我的情况下，我为每个块都有一个图表，当它们都同时重绘时很明显。

就我而言，我决定覆盖引导 css；但是，您可能希望通过其他媒体查询来考虑各种屏幕尺寸。

这是针对最大网格并确保span4在每个“行”上正确对齐的 3 s（注意这是 BS 2.3.2）的规则，但在单个 s 内row-fluid：

  .row-fluid [class*="span4"]:nth-of-type(3n+1) {
    margin-left: 0;
  }
  .row-fluid [class*="span4"]:nth-of-type(n+4) {
    margin-top: 10px;
  }
于 2014-03-20T03:58:21.653 回答