如何将每一对包装在 {{#each}} 循环中的 div 中

Question

问题是如何在 div 中的 {{#each}} 循环中包装每两个后续项目以获得此布局

<ul>
  <div>
    <li>first item</li>
    <li> second item</li>
  </div>
  <div>
    <li>third item</li>
    <li> fourth item</li>
  </div>
  // etc...
</ul>

对于该模型

[
  {id: 1, name: 'first item'},
  {id: 2, name: 'second item'},
  {id: 3, name: 'third item'},
  {id: 4, name: 'fourth item'},
  // etc...
]

Answer 1

我认为使用 {{#each}} 助手没有直接的方法。

这是我会做的...

1.

编写自定义模板助手（从 {{#each}} 开始）

2。重新建模阵列

 model: function() {
      var arr = [
            {id: 1, name: 'first item'},
            {id: 2, name: 'second item'},
            {id: 3, name: 'third item'},
            {id: 4, name: 'fourth item'},
            // etc...
      ];
      // splits array in pairs of 2
      return _.chunk(arr, 2); 
 }

_.chunk 是一个 lodash 助手，但您可以轻松地推出自己的实现。

模板：

 <ul>
 {{#each model as |pair|}}
      <li>{{pair.firstObject}}</li>
      <li>{{pair.lastObjectObject}}</li>
 {{/each}
 </ul>

.firstObject 和 .lastObject 是 Ember.Array 助手。如果您禁用了 EXTEND_PROTOTYPES，您可以改为执行以下操作：

 <ul>
 {{#each model as |pair|}}
      {{#each pair as |item|}}
           <li>{{item}}</li>
      {{/each}
 {{/each}
 </ul>

如何将每一对包装在 {{#each}} 循环中的 div 中

How to wrap each pair in the div inside {{#each}} loop

ember.js

1.

2。重新建模阵列

模板：