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

Question

我正在使用 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 中执行此操作以及每个组的成员数量是动态的感到有点困惑。

Answer 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>