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

Answer 2

我认为最好的方法来实现你正在尝试的是添加一些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>