Ember.js - 每行显示两个表格单元格答案

【问题标题】：Ember.js - Display two table cells per rowEmber.js - 每行显示两个表格单元格
【发布时间】：2015-10-05 19:32:03
【问题描述】：

我正在使用 Ember.js，我的计划是创建一个表格，每行有两个表格单元格用于任意数量的表格单元格，以便

<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  ...
</tr>

会变成

<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  ...
</tr>

我能想到的最接近的参考是它类似于 Facebook 在 Facebook 群组中显示成员的方式。

目前这就是我所拥有的

<table id='group-member-table' class='table'>
  <thead>
    <tr>
      <th colspan='2'>Members</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      {{#each groupinfo.individuals as |member|}}
        <td>{{member.firstname}} {{member.lastname}</td>
      {{/each}}
    </tr>
  </tbody>
</table>

我只是对如何在 Ember.js 中执行此操作以及每个组具有动态成员数量感到有点困惑。

【问题讨论】：

编写一个 Handlebars 助手，它 - 对于模 2 的值（每隔一个值），它用包装这些值 - arlocarreon.com/blog/javascript/handlebars-js-everyother-helper

标签： javascript html css ember.js twitter-bootstrap-3

【解决方案1】：

我认为实现您所尝试的最佳方法是添加一些 CSS 并删除表格。

<div id="container" style="width:250px;">
    <div style="float:left;display:inline-block;width:100px;">1</div>
    <div style="float:left;display:inline-block;width:100px;">2</div>
    <div style="float:left;display:inline-block;width:100px;">3</div>
    <div style="float:left;display:inline-block;width:100px;">4</div>
</div>

当元素填满第一行时，它们将换行到下一行，产生与表格示例相同的效果。

您的代码的格式应该是这样的：

<div id='group-member-container'>
  <div>
      <p>Members</p>
  </div>
  <div id="container" style="width:250px;">
      {{#each groupinfo.individuals as |member|}}
        <div style="float:left;display:inline-block;width:100px;">{{member.firstname}} {{member.lastname}</div>
      {{/each}}
  </div>
</div>

【讨论】：

是的，我在发布问题后考虑过使用 css 路线。我想这就是我要走的路

【解决方案2】：

我最终主要使用基于 Andrew 模型的 Bootstrap 和 CSS

<div class='group-member-container col-xs-12 col-sm-12 col-md-12'>
  {{#each groupinfo.individuals as |member|}}
    <div class='group-member-card col-xs-12 col-sm-6 col-md-6'>
      <div class='card'>{{member.firstname}} {{member.lastname}}</div>
    </div>
  {{/each}}
</div>

对于 .scss 文件：

.group-member-container {
  background: white;
  padding: 10px 0;
  .group-member-card {
    margin: 5px 0;
    .card {
      border: 1px solid #dddddd;
      box-shadow: none;
    }
  }
}

【讨论】：